CSS Object Model [CSSOM], một phần của DOM, hiển thị các giao diện cụ thể cho phép thao tác một lượng lớn thông tin liên quan đến CSS. Ban đầu được xác định trong đề xuất Kiểu DOM Cấp 2, các giao diện này hiện tạo thành một đặc tả, Mô hình Đối tượng CSS [CSSOM] nhằm mục đích thay thế nó
Trong nhiều trường hợp và nếu có thể, cách tốt nhất là thao tác linh hoạt các lớp thông qua thuộc tính
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
3 vì giao diện cuối cùng của tất cả các hook kiểu dáng có thể được kiểm soát trong một biểu định kiểu duy nhất. Mã JavaScript của một người cũng trở nên rõ ràng hơn vì thay vì dành riêng cho các chi tiết về kiểu dáng, nó có thể tập trung vào ngữ nghĩa tổng thể của từng phần mà nó đang tạo hoặc thao tác, để lại các chi tiết về kiểu dáng chính xác cho biểu định kiểu dáng. Tuy nhiên, có những trường hợp mà việc thu thập hoặc thao tác các quy tắc thực sự có thể hữu ích [dù là cho toàn bộ bảng định kiểu hay các phần tử riêng lẻ] và điều đó được mô tả chi tiết hơn bên dưới. Cũng lưu ý rằng, như với các kiểu DOM của từng thành phần riêng lẻ, khi nói về thao tác với biểu định kiểu, đây không thực sự là thao tác với [các] tài liệu vật lý, mà chỉ là biểu diễn bên trong của tài liệuĐối tượng cơ bản
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 hiển thị các giao diện DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
5 và DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
6. Các giao diện đó chứa các thành viên như DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
7, DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
8 và DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
0 để truy cập và thao tác với các quy tắc kiểu riêng lẻ tạo nên biểu định kiểu CSSĐể truy cập các đối tượng
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 từ DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
2, bạn có thể sử dụng thuộc tính DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
3 và truy cập các đối tượng riêng lẻ theo chỉ mục [e. g. , DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 là biểu định kiểu đầu tiên được xác định cho tài liệu, v.v. ]Sửa đổi quy tắc biểu định kiểu bằng CSSOM
Trong ví dụ này, nền của trang được đặt thành màu đỏ bằng CSS. Sau đó, JavaScript truy cập thuộc tính bằng CSSOM và thay đổi nền thành màu xanh lam
Modifying a stylesheet rule with CSSOM
body {
background-color: red;
}
const stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.backgroundColor = "aqua";
The stylesheet declaration for the body's background color is modified via
JavaScript.
Kết quả
Danh sách các thuộc tính có sẵn trong DOM từ thuộc tính
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 được cung cấp trên trang Danh sách thuộc tính DOM CSSĐể sửa đổi kiểu thành tài liệu bằng cú pháp CSS, người ta có thể chèn quy tắc hoặc chèn thẻ
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
6 có thuộc tính DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
7 được đặt thành CSS mong muốnSửa đổi phong cách của một phần tử
Thuộc tính phần tử
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 [xem thêm phần "Đối tượng kiểu DOM" bên dưới] cũng có thể được sử dụng để lấy và đặt kiểu cho một phần tử. Tuy nhiên, thuộc tính này chỉ trả về các thuộc tính kiểu đã được đặt nội tuyến [e. g. , DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
9 trả về chuỗi "DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
0" hoặc trực tiếp cho phần tử đó bằng cách sử dụng DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
1, mặc dù có thể có các kiểu khác trên phần tử từ biểu định kiểu]Ngoài ra, khi bạn đặt thuộc tính này trên một phần tử, bạn sẽ ghi đè bất kỳ kiểu nào đã được đặt ở nơi khác cho thuộc tính cụ thể của phần tử đó mà bạn đang đặt. Ví dụ: đặt thuộc tính
DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
2 sẽ ghi đè cài đặt được thực hiện ở nơi khác cho thuộc tính DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
2 của phần tử đó trong phần đầu hoặc biểu định kiểu bên ngoài. Tuy nhiên, điều này sẽ không ảnh hưởng đến bất kỳ khai báo thuộc tính nào khác cho các kiểu của phần tử đó, chẳng hạn như phần đệm hoặc lề hoặc phông chữ chẳng hạnĐể thay đổi kiểu của một phần tử cụ thể, bạn có thể điều chỉnh ví dụ sau cho [các] phần tử bạn muốn tạo kiểu
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
Phương thức
DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
4 trên đối tượng DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
5 trả về tất cả các kiểu đã thực sự được tính toán cho một phần tửĐối tượng kiểu DOM
Đối tượng
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 đại diện cho một tuyên bố phong cách cá nhân. Đối tượng kiểu được truy cập từ DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
2 hoặc từ các phần tử mà kiểu đó được áp dụng. Nó đại diện cho các kiểu nội tuyến trên một phần tử cụ thểĐặt thuộc tính kiểu
Quan trọng hơn hai thuộc tính được lưu ý ở đây là việc sử dụng đối tượng
DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 để đặt các thuộc tính kiểu riêng lẻ trên một phần tử________số 8
Phương tiện và loại của phong cách có thể được cung cấp hoặc không
Sử dụng phương thức setAttribute
Lưu ý rằng bạn cũng có thể thay đổi kiểu của một phần tử bằng cách tham chiếu đến phần tử đó rồi sử dụng phương thức
DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
9 của phần tử đó để chỉ định thuộc tính CSS và giá trị của phần tử đóDOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
8Tuy nhiên, hãy lưu ý rằng
DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
9 loại bỏ tất cả các thuộc tính DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 khác có thể đã được xác định trong đối tượng DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 của phần tử. Nếu phần tử DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
83 ở trên có thuộc tính DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
4 trong dòng là DOCTYPE html>
simple style example
function alterStyle[elem] {
elem.style.background = "green";
}
function resetStyle[elemId] {
const elem = document.getElementById[elemId];
elem.style.background = "white";
}
#p1 {
border: solid blue 2px;
}
Click here to change background color.
Reset background color
85, thì giá trị đó sẽ bị xóa bằng cách sử dụng DOCTYPE html>
Style Property Example
function setStyle[] {
document.getElementById["d"].style.color = "orange";
}
function resetStyle[] {
document.getElementById["d"].style.color = "black";
}
Thunder
Click here to change text color
Reset text color
9