CSSPageRule

Baseline Widely available *

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

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

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

CSSRule CSSGroupingRule CSSPageRule

实例属性

继承自其父接口 CSSGroupingRuleCSSRule 的属性。

CSSPageRule.selectorText

表示与该 at 规则关联的页面选择器的文本。

CSSPageRule.style 只读

返回与该 at 规则关联的声明块

实例方法

继承自其父接口 CSSGroupingRuleCSSRule 的方法。

示例

筛选页面规则

这个示例展示了如何找到文档加载的 @page 规则对应的 CSSPageRule 对象。

CSS

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

css
@page {
  margin: 1cm;
}

JavaScript

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

js
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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSPageRule
selectorText
style
Type changed to CSSPageDescriptors
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.