CSSRuleList

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

CSSRuleList 表示一個只讀的 CSSRule 物件有序集合。

雖然 CSSRuleList 物件是隻讀的，不能直接修改，但它被認為是一個即時物件，因為其內容會隨著時間的推移而改變。

要編輯由 CSSRule 物件返回的底層規則，請使用 CSSStyleSheet.insertRule() 和 CSSStyleSheet.deleteRule()，它們是 CSSStyleSheet 的方法。

這個介面曾是建立不可修改列表的嘗試，並且至今仍然被支援，以免破壞現有程式碼。現代 API 使用基於 JavaScript 陣列的型別來表示列表結構，從而提供了許多陣列方法，同時對其使用施加了額外的語義（例如，使其項只讀）。

這些歷史原因並不意味著開發者應該避免使用 CSSRuleList。您自己不會建立 CSSRuleList 物件，而是從 CSSStyleSheet.cssRules 和 CSSKeyframesRule.cssRules 等 API 獲取它們，並且這些 API 沒有被棄用。但是，請注意與真實陣列在語義上的差異。

例項屬性

CSSRuleList.length 只讀: 返回一個整數，表示集合中 CSSRule 物件的數量。

例項方法

CSSRuleList.item(): 獲取單個 CSSRule。

示例

在下面的示例中，有一個包含三條規則的樣式表。使用 CSSStyleSheet.cssRules 返回一個 CSSRuleList，並將其列印到控制檯。

使用 CSSRuleList.length 將列表中的規則數量列印到控制檯。使用 0 作為 CSSRuleList.item 的引數可以返回第一個 CSSRule。在此示例中，它將返回為 body 選擇器設定的規則。

CSS

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]);

規範

規範
CSS 物件模型 (CSSOM) # the-cssrulelist-interface

瀏覽器相容性

另見

CSSRule

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年8月8日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤