Tạo phần tử bên tronghtml
|
Tạo một phần tử từ một chuỗi (không nối nó vào tài liệu). Nếu chuỗi đã cho chứa nhiều phần tử, chỉ phần tử đầu tiên sẽ được trả về Show
const createElement = str => {
const el = document.createElement('div');
el.innerHTML = str;
return el.firstElementChild;
};Đoạn trích được đề xuất
Thêm một trình lắng nghe sự kiện vào một phần tử sẽ chỉ chạy lệnh gọi lại khi sự kiện được kích hoạt lần đầu tiên Nếu bạn chỉ sửa đổi một thuộc tính, bạn có thể trực tiếp thay đổi cài đặt CSS bằng cách sử dụng thuộc tính elem.setAttribute("style","width: 500px; background-color: yellow;");8 của phần tửvar elem = document.getElementById("elem");
elem.style.width = "500px";Nếu bạn đang sửa đổi một hoặc nhiều giá trị, bạn có thể sử dụng phương thức elem.setAttribute("style","width: 500px; background-color: yellow;");9 của phần tửelem.setAttribute("style","width: 500px; background-color: yellow;");Thuộc tính CSS của một phần tử có thể được sửa đổi trong JavaScript bằng một trong hai cách tiếp cận. Như giải pháp đã chứng minh, cách tiếp cận đơn giản nhất là đặt trực tiếp giá trị của thuộc tính bằng cách sử dụng thuộc tính elem.setAttribute("style","width: 500px; background-color: yellow;");8 của phần tửelem.style.width = "500px"; Nếu thuộc tính CSS chứa dấu gạch nối, chẳng hạn như elem.setAttribute("style","width: 500px; background-color: yellow;");0 hoặc elem.setAttribute("style","width: 500px; background-color: yellow;");1, hãy sử dụng ký hiệu CamelCase cho thuộc tínhelem.style.fontFamily = "Courier"; elem.style.backgroundColor = "rgb(255,0,0)"; Bạn cũng có thể sử dụng phương thức elem.setAttribute("style","width: 500px; background-color: yellow;");9 của phần tử để đặt thuộc tính kiểuelem.setAttribute("style","font-family: Courier; background-color: yellow");Tuy nhiên, khi bạn đặt thuộc tính kiểu bằng cách sử dụng elem.setAttribute("style","width: 500px; background-color: yellow;");9, thuộc tính này sẽ xóa mọi giá trị đã đặt trước đó trong JavaScripttrình bày cách thức hoạt động của các kỹ thuật thiết lập kiểu, bao gồm cả tác động của việc sử dụng elem.setAttribute("style","width: 500px; background-color: yellow;");9. Các kỹ thuật khác nhau được sử dụng để đặt và nhận các thuộc tính kiểu, bao gồm cách tiếp cận nhiều trình duyệt để truy cập kiểu được tính toán cho thuộc tínhVí dụÂ 12-7. Â Mô tả cài đặt và truy xuất cài đặt kiểu CSS ________số 8 Ngay sau khi tải trang, phần tử elem.setAttribute("style","width: 500px; background-color: yellow;");5 được truy cập bằng cách sử dụng elem.setAttribute("style","width: 500px; background-color: yellow;");6 và phần tử elem.setAttribute("style","width: 500px; background-color: yellow;");1 của nó được truy xuất bằng cách sử dụng hàm trình duyệt chéo lấy kiểu được tính toán cho thuộc tính. Đầu ra thông báo là ârgb(0,255,0)â, đại diện cho màu vàng chanh được đặt trong biểu định kiểu của trangTiếp theo, hai thuộc tính CSS được đặt bằng thuộc tính elem.setAttribute("style","width: 500px; background-color: yellow;");8 của phần tử. elem.setAttribute("style","width: 500px; background-color: yellow;");9 và elem.setAttribute("style","width: 500px; background-color: yellow;");1. Giờ đây, phần tử elem.setAttribute("style","width: 500px; background-color: yellow;");5 có nền màu vàng và rộng 500 thay vì 200 pixel. Cả hai giá trị đã sửa đổi đều được truy cập và in ra, vì vậy chúng tôi có thể xác nhận rằng có, các giá trị đã thay đổiTiếp theo, elem.setAttribute("style","width: 500px; background-color: yellow;");0 cho phần tử được đặt thành Chuyển phát nhanh, sử dụng ký hiệu mảng, đây là một cách tiếp cận khác mà bạn có thể sử dụng để đặt và nhận các giá trị thuộc tính kiểu. Giờ đây, phần tử elem.setAttribute("style","width: 500px; background-color: yellow;");5 rộng 500 pixel, có nền màu vàng và họ phông chữ của nó là CourierThuộc tính style được truy cập bằng cách sử dụng elem.style.width = "500px";4. Một chuỗi các giá trị được đặt bằng thuộc tính elem.setAttribute("style","width: 500px; background-color: yellow;");8 được trả về cho tất cả các trình duyệtvar elem = document.getElementById("elem");
elem.style.width = "500px";8Màu phông chữ tím được đặt nội tuyến trong thuộc tính elem.setAttribute("style","width: 500px; background-color: yellow;");8 trong phần tử elem.setAttribute("style","width: 500px; background-color: yellow;");5Tiếp theo, tôi đang sử dụng phương pháp elem.setAttribute("style","width: 500px; background-color: yellow;");9 để thay đổi chiều cao của phần tử. Một vài điều xảy ra khi tôi sử dụng phương pháp elem.setAttribute("style","width: 500px; background-color: yellow;");9 trong ví dụ. Chiều cao của phần tử được thay đổi thành 100 pixel, nhưng các thuộc tính kiểu đã đặt trước đó (elem.style.fontFamily = "Courier"; elem.style.backgroundColor = "rgb(255,0,0)";0, elem.setAttribute("style","width: 500px; background-color: yellow;");9, elem.setAttribute("style","width: 500px; background-color: yellow;");1 và elem.setAttribute("style","width: 500px; background-color: yellow;");0) đã bị “xóa”,â và hoàn nguyên về cài đặt ban đầu trong biểu định kiểu hoặc . Phần tử hiện có chiều rộng 200 pixel, chiều cao 100 pixel, có nền màu lục và phông chữ trở lại phông chữ mặc định cho trình duyệt (thường là giá trị serif) và màu phông chữ mặc định, màu đenNhư bạn có thể thấy, việc sử dụng elem.setAttribute("style","width: 500px; background-color: yellow;");9 để thay đổi thuộc tính phần tử elem.setAttribute("style","width: 500px; background-color: yellow;");8 có thể tác động đáng kể đến các cài đặt trước đó, bao gồm mọi cài đặt CSS nội tuyến. Bạn chỉ nên sử dụng elem.setAttribute("style","width: 500px; background-color: yellow;");9 nếu bạn đang thay đổi nhiều giá trị cùng một lúc và bạn không sử dụng bất kỳ thuộc tính kiểu nội tuyến nào hoặc chưa sửa đổi cài đặt kiểu của phần tử trước đó trong ứng dụng của mìnhCác hiệu ứng được thể hiện trong công thức này hoạt động giống nhau với tất cả các trình duyệt mục tiêu của cuốn sách, ngoại trừ IE7. Thuộc tính style là một đối tượng thực tế trong IE7, vì vậy khi bạn truy cập style bằng elem.style.width = "500px";4, bạn sẽ nhận được một đối tượng chứ không phải một chuỗi. Vì nó là một đối tượng nên nó chỉ đọc, nghĩa là bạn không thể sử dụng elem.setAttribute("style","width: 500px; background-color: yellow;");9 với IE7
Làm cách nào để tạo một phần tử bằng cách sử dụng InternalHTML?HTML bên trong. Thuộc tính phần tử innerHTML lấy hoặc đặt đánh dấu HTML hoặc XML có trong phần tử. Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức insertAdjacentHTML() .
Tôi nên sử dụng InternalHTML hay createElement?#1) createElement hoạt động hiệu quả hơn
. Do đó, nó kém hiệu quả hơn so với việc tạo một phần tử mới và nối thêm vào div.
Bạn có thể += innerHTML không?Việc nối thêm vào InternalHTML không được hỗ trợ . Thông thường, += được sử dụng để nối thêm trong JavaScript. Nhưng khi thêm vào thẻ Html bằng cách sử dụng InternalHTML, toàn bộ thẻ được phân tích cú pháp lại.
Làm cách nào để tạo phần tử mới trong JavaScript?Mã này tạo một phần tử . const para = tài liệu. createElement("p"); nút const = tài liệu. createTextNode("Đây là một đoạn mới. "); cho. appendChild(nút); phần tử const = tài liệu. getElementById("div1"); thành phần. . const elmnt = tài liệu. getElementById("p1"); cây du. gỡ bỏ(); const cha mẹ = tài liệu |
