CSSStyleSheet

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Giao diện CSSStyleSheet đại diện cho một CSS bảng kiểu duy nhất, và cho phép bạn kiểm tra cũng như sửa đổi danh sách các quy tắc contained trong bảng kiểu. Nó kế thừa các thuộc tính và phương thức từ phần tử cha, StyleSheet.

Một bảng kiểu bao gồm một tập hợp các đối tượng CSSRule đại diện cho từng quy tắc trong bảng kiểu. Các quy tắc được chứa trong một CSSRuleList, có thể được lấy từ thuộc tính cssRules của bảng kiểu.

Ví dụ, một quy tắc có thể là một đối tượng CSSStyleRule chứa một kiểu dáng như:

css

h1,
h2 {
  font-size: 16pt;
}

Một quy tắc khác có thể là một at-rule như @import hoặc @media, v.v.

Xem phần Lấy một StyleSheet để biết các cách khác nhau mà một đối tượng CSSStyleSheet có thể được lấy. Một đối tượng CSSStyleSheet cũng có thể được khởi tạo trực tiếp. Hàm khởi tạo, và các phương thức CSSStyleSheet.replace(), CSSStyleSheet.replaceSync() là các bổ sung mới hơn vào đặc tả, cho phép Constructable Stylesheets (Bảng kiểu có thể khởi tạo).

Để áp dụng một CSSStyleSheet vào một tài liệu hoặc shadow root, gán nó cho thuộc tính Document.adoptedStyleSheets hoặc ShadowRoot.adoptedStyleSheets tương ứng.

Constructor

CSSStyleSheet(): Tạo một đối tượng CSSStyleSheet mới.

Thuộc tính instance

Kế thừa thuộc tính từ phần tử cha, StyleSheet.

CSSStyleSheet.cssRules Read only: Trả về một CSSRuleList trực tiếp duy trì danh sách cập nhật các đối tượng CSSRule cấu thành bảng kiểu.

Note: Trong một số trình duyệt, nếu một bảng kiểu được tải từ một domain khác, việc truy cập cssRules sẽ dẫn đến SecurityError.
CSSStyleSheet.ownerRule Read only: Nếu bảng kiểu này được nhập vào tài liệu bằng cách sử dụng một @import rule, thuộc tính ownerRule trả về CSSImportRule tương ứng; nếu không, giá trị của thuộc tính này là null.

Phương thức instance

Kế thừa phương thức từ phần tử cha, StyleSheet.

CSSStyleSheet.deleteRule(): Xóa quy tắc tại vị trí chỉ định trong danh sách quy tắc của bảng kiểu.
CSSStyleSheet.insertRule(): Chèn một quy tắc mới tại vị trí chỉ định trong bảng kiểu, dựa trên biểu diễn dạng văn bản của quy tắc.
CSSStyleSheet.replace(): Thay thế bất đồng bộ nội dung của bảng kiểu và trả về một Promise giải quyết với CSSStyleSheet đã cập nhật.
CSSStyleSheet.replaceSync(): Thay thế đồng bộ nội dung của bảng kiểu.

Thuộc tính legacy

Các thuộc tính này là thuộc tính legacy do Microsoft giới thiệu; được duy trì để tương thích với các trang web hiện có.

rules Read only Đã lỗi thời: Thuộc tính rules có chức năng tương tự như thuộc tính cssRules tiêu chuẩn; nó trả về một CSSRuleList trực tiếp duy trì danh sách cập nhật của tất cả các quy tắc trong bảng kiểu.

Phương thức legacy

Các phương thức này là phương thức legacy do Microsoft giới thiệu; được duy trì để tương thích với các trang web hiện có.

addRule() Đã lỗi thời

Thêm một quy tắc mới vào bảng kiểu dựa trên bộ chọn áp dụng cho quy tắc đó và khối kiểu dáng áp dụng cho các phần tử khớp.

Điều này khác với insertRule(), phương thức nhận biểu diễn dạng văn bản của toàn bộ quy tắc dưới dạng một chuỗi duy nhất.

removeRule() Đã lỗi thời

Có chức năng tương tự như deleteRule(); xóa quy tắc tại vị trí chỉ định khỏi danh sách quy tắc của bảng kiểu.

Lấy một StyleSheet

Một bảng kiểu được liên kết với tối đa một Document, mà nó áp dụng cho (trừ khi disabled). Có thể lấy danh sách các đối tượng CSSStyleSheet cho một tài liệu nhất định bằng cách sử dụng thuộc tính Document.styleSheets. Một bảng kiểu cụ thể cũng có thể được truy cập từ đối tượng chủ sở hữu (Node hoặc CSSImportRule), nếu có.

Một đối tượng CSSStyleSheet được tạo và chèn tự động vào danh sách Document.styleSheets của tài liệu bởi trình duyệt, khi một bảng kiểu được tải cho một tài liệu.

Danh sách (có thể chưa đầy đủ) các cách một bảng kiểu có thể được liên kết với một tài liệu như sau:

Lý do bảng kiểu được liên kết với tài liệu	Xuất hiện trong danh sách `document. styleSheets`	Lấy phần tử/quy tắc chủ sở hữu từ đối tượng bảng kiểu	Giao diện cho đối tượng chủ sở hữu	Lấy đối tượng CSSStyleSheet từ chủ sở hữu
Các phần tử `<style>` và `<link>` trong tài liệu	Có	`.ownerNode`	`HTMLLinkElement`, `HTMLStyleElement`, hoặc `SVGStyleElement`	`HTMLLinkElement.sheet`, `HTMLStyleElement.sheet`, hoặc `SVGStyleElement.sheet`
Quy tắc CSS `@import` trong các bảng kiểu khác áp dụng cho tài liệu	Có	`.ownerRule`	`CSSImportRule`	`.styleSheet`
Chỉ thị xử lý `<?xml-stylesheet ?>` trong tài liệu (không phải HTML)	Có	`.ownerNode`	`ProcessingInstruction`	`.sheet`
JavaScript `import ... with { type: "css" }`	Không	Không áp dụng	Không áp dụng	Không áp dụng
HTTP Link Header	Có	Không áp dụng	Không áp dụng	Không áp dụng
Bảng kiểu mặc định của user agent	Không	Không áp dụng	Không áp dụng	Không áp dụng

Specifications

Thông số kỹ thuật
CSS Object Model (CSSOM) # the-cssstylesheet-interface

Browser compatibility

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on Jan 1, 1970 by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này