StyleSheetList

StyleSheetList 接口表示一个 CSSStyleSheet 对象列表。此对象的实例可由 Document.styleSheets 返回。

它是一个类似数组的对象，但不能使用 Array 方法进行迭代。但是，它可以在其索引上的标准 for 循环中进行迭代，或者转换为 Array。

注意：通常，像 StyleSheetList 这样的列表接口会围绕 Array 类型进行包装，因此您可以在其上使用 Array 方法。对于历史原因，这里的情况并非如此。但是，您可以将 StyleSheetList 转换为 Array 以使用这些方法（请参见下面的示例）。

实例属性

StyleSheetList.length 只读: 返回集合中 CSSStyleSheet 对象的数量。

实例方法

StyleSheetList.item(): 返回传递的索引处的 CSSStyleSheet 对象，如果该索引不存在项目，则返回 null。

示例

使用 for 循环获取 CSSStyleSheet 对象

const styleSheet = [];
const styleSheets = document.styleSheets;

for (let i = 0; i < styleSheets.length; i++) {
  styleSheet.push(styleSheets[i]);
}

使用数组方法获取文档的所有 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,
      );
    }
  })
  .filter(Boolean)
  .join("\n");

规范

规范
CSS 对象模型 (CSSOM) # the-stylesheetlist-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。