CSSPageRule

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

CSSPageRule 表示一个单独的 CSS @page 规则。

实例属性

继承自其父接口 CSSGroupingRule 和 CSSRule 的属性。

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

实例方法

继承自其父接口 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

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

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

  const myRules = document.styleSheets[sheetCount].cssRules;
  log(`规则：${myRules.length}`);
  for (let i = 0; i < myRules.length; i++) {
    log(`规则：${myRules[i]}`);
    if (myRules[i] instanceof CSSPageRule) {
      //……使用 CSSPageRule 做一些事情
    }
  }
}

结果

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

规范

Specification
CSS Object Model (CSSOM) # the-csspagerule-interface

实例属性

实例方法

示例

筛选页面规则

CSS

JavaScript

结果

规范

浏览器兼容性