CSSPageRule

CSSPageRule 表示单个 CSS @page 规则。

实例属性

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

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

实例方法

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

示例

筛选页面规则

此示例显示如何查找文档加载的 @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

代码迭代文档中的所有 sheet，并迭代每个 sheet 中的所有 cssRules，记录 sheet 索引、规则数量以及每个规则对象的类型。然后我们使用其类型检测 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 (let i = 0; i < myRules.length; i++) {
    log(`rule: ${myRules[i]}`);
    if (myRules[i] instanceof CSSPageRule) {
      //... Do something with CSSPageRule
    }
  }
}

结果

结果如下所示。正如您所看到的，有两个 sheet，分别对应于此主文档和示例代码框架，并且每个 sheet 都有多个规则，其中只有一个是我们 CSSPageRule。

规范

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

浏览器兼容性

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