StyleSheetList

Baseline 已廣泛支援

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

StyleSheetList 介面表示一個 CSSStyleSheet 物件列表。此物件的例項可以由 Document.styleSheets 返回。

它是一個類陣列物件，但不能使用 Array 方法進行迭代。但是，它可以透過標準 for 迴圈按索引進行迭代，或者轉換為一個 Array。

注意： 通常像 StyleSheetList 這樣的列表介面會包裝 Array 型別，因此您可以在它們上使用 Array 方法。出於歷史原因，這裡的情況並非如此。但是，您可以將 StyleSheetList 轉換為 Array 以便使用這些方法（請參見下面的示例）。

例項屬性

StyleSheetList.length 只讀: 返回集合中 CSSStyleSheet 物件的數量。

例項方法

StyleSheetList.item(): 返回指定索引處的 CSSStyleSheet 物件，如果該索引沒有項，則返回 null。

示例

使用 for 迴圈獲取 CSSStyleSheet 物件

for (const styleSheet of document.styleSheets) {
  console.log(styleSheet); // A CSSStyleSheet object
}

使用 Array 方法獲取文件的所有 CSS 規則

const allCSS = [...document.styleSheets]
  .map((styleSheet) => {
    try {
      return [...styleSheet.cssRules].map((rule) => rule.cssText).join("");
    } catch (e) {
      console.log(
        "Access to stylesheet %s is denied. Ignoring…",
        styleSheet.href,
      );
      return undefined;
    }
  })
  .filter(Boolean)
  .join("\n");

規範

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

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

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

在 GitHub 上檢視此頁面 • 報告此內容的麻煩