CSSPageRule

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

CSSPageRule 表示单个 CSS @page 规则。

实例属性

继承其祖先 CSSGroupingRule 和 CSSRule 的属性。

CSSPageRule.selectorText: 表示与 at-rule 关联的页面选择器的文本。
CSSPageRule.style 只读: 返回与 at-rule 关联的声明块。

实例方法

继承其祖先 CSSGroupingRule 和 CSSRule 的方法。

示例

过滤 page 规则

此示例显示了如何为文档加载的 @page 规则查找 CSSPageRule 对象。

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 220px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

CSS

下面我们使用 @page 规则为页面定义样式。

css

@page {
  margin: 1cm;
}

JavaScript

代码遍历文档中的所有样式表，以及每个样式表中的所有 cssRules，记录样式表索引、规则数量以及每种规则对象的类型。然后，我们通过类型检测 CSSPageRule 对象（不对该信息执行任何操作）。

for (
  let sheetCount = 0;
  sheetCount < document.styleSheets.length;
  sheetCount++
) {
  const sheet = document.styleSheets[sheetCount].cssRules;
  log(`styleSheet: ${sheetCount}`);

  const myRules = document.styleSheets[sheetCount].cssRules;
  log(`rules: ${myRules.length}`);
  for (const rule of myRules) {
    log(`rule: ${rule}`);
    if (rule instanceof CSSPageRule) {
      // Do something with CSSPageRule
    }
  }
}

结果

结果如下所示。正如您所见，有两个样式表，分别对应于此主文档和示例代码框架，每个样式表都有一些规则，其中只有一个是我们的 CSSPageRule。

规范

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

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改时间为 ⁨2025年5月27日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误