Bên trongHTML thêm phần tử

Nếu bạn chỉ sửa đổi một thuộc tính, thì 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.style.width = "500px";

4 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.style.width = "500px";

5 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.style.width = "500px";

4 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ính

elem.style.fontFamily = "Courier";
elem.style.backgroundColor = "rgb(255,0,0)";

Bạn cũng có thể sử dụng phương thức

elem.style.width = "500px";

5 của phần tử để đặt thuộc tính kiểu

elem.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.style.width = "500px";

5, nó sẽ xóa mọi giá trị đã đặt trước đó trong JavaScript

Ví dụ 12-7 minh họa cách hoạt động của các kỹ thuật thiết lập kiểu, bao gồm tác động của việc sử dụng

elem.style.width = "500px";

5. 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ính

Ví dụ 12-7.  Mô tả cài đặt và truy xuất cài đặt kiểu CSS

Changing style






testing

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 trang

Tiếp theo, hai thuộc tính CSS được đặt bằng thuộc tính

elem.style.width = "500px";

4 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 đổi

Tiế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à Courier

Thuộ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.style.width = "500px";

4 được trả về cho tất cả các trình duyệt

elem.setAttribute("style","width: 500px; background-color: yellow;");

7

Màu phông chữ tím được đặt nội tuyến trong thuộc tính

elem.style.width = "500px";

4 trong phần tử

elem.setAttribute("style","width: 500px; background-color: yellow;");

5

Tiếp theo, tôi đang sử dụng phương pháp

elem.style.width = "500px";

5 để 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.style.width = "500px";

5 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 mặc định bởi tác nhân người dùng. Phần tử hiện có chiều rộng 200 pixel, chiều cao 100 pixel, có nền màu xanh lá cây 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 đen

Như bạn có thể thấy, việc sử dụng

elem.style.width = "500px";

5 để thay đổi thuộc tính phần tử

elem.style.width = "500px";

4 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.style.width = "500px";

5 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 từng sửa đổi cài đặt kiểu của phần tử trong ứng dụng của mình

Cá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, có nghĩa là bạn không thể sử dụng

elem.style.width = "500px";

5 với IE7

Làm cách nào để thêm văn bản vào InternalHTML?

Bạn có thể += innerHTML không?

Làm cách nào để thêm phần tử bên trong div bằng JavaScript?

Làm cách nào để nối các phần tử trong JavaScript?