CSSRuleList
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.
CSSRuleList biểu thị một tập hợp có thứ tự các đối tượng CSSRule chỉ đọc.
Mặc dù đối tượng CSSRuleList là chỉ đọc và không thể được sửa đổi trực tiếp, nó được coi là đối tượng live, vì nội dung có thể thay đổi theo thời gian.
Để chỉnh sửa các quy tắc cơ bản được trả về bởi các đối tượng CSSRule, sử dụng CSSStyleSheet.insertRule() và CSSStyleSheet.deleteRule(), là các phương thức của CSSStyleSheet.
Giao diện này là nỗ lực tạo danh sách không thể sửa đổi và chỉ tiếp tục được hỗ trợ để không phá vỡ code đã sử dụng nó. Các API hiện đại biểu thị cấu trúc danh sách bằng các loại dựa trên mảng JavaScript, do đó cung cấp nhiều phương thức mảng, đồng thời áp đặt các ngữ nghĩa bổ sung về việc sử dụng chúng (chẳng hạn như làm cho các mục của chúng chỉ đọc).
Những lý do lịch sử này không có nghĩa là bạn với tư cách là nhà phát triển nên tránh CSSRuleList. Bạn không tự tạo đối tượng CSSRuleList, mà lấy chúng từ các API như CSSStyleSheet.cssRules và CSSKeyframesRule.cssRules, và các API này không bị lỗi thời. Tuy nhiên, hãy cẩn thận về sự khác biệt ngữ nghĩa so với mảng thực.
Thuộc tính phiên bản
CSSRuleList.lengthRead only-
Trả về một số nguyên biểu thị số lượng đối tượng
CSSRuletrong tập hợp.
Phương thức phiên bản
CSSRuleList.item()-
Lấy một
CSSRuleđơn lẻ.
Ví dụ
Trong ví dụ sau có một stylesheet với ba quy tắc. Sử dụng CSSStyleSheet.cssRules trả về CSSRuleList, được in ra console.
Số lượng quy tắc trong danh sách được in ra console bằng CSSRuleList.length. CSSRule đầu tiên có thể được trả về bằng cách sử dụng 0 làm tham số cho CSSRuleList.item, trong ví dụ này sẽ trả về các quy tắc được đặt cho bộ chọn body.
CSS
body {
font-family:
system-ui,
-apple-system,
sans-serif;
margin: 2em;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}
.container > * {
background-color: #3740ff;
color: white;
}
JavaScript
let myRules = document.styleSheets[0].cssRules;
console.log(myRules);
console.log(myRules.length);
console.log(myRules[0]);
Thông số kỹ thuật
| Specification |
|---|
| CSS Object Model (CSSOM) # the-cssrulelist-interface |