CSSPageRule：style 属性

Baseline 广泛可用 *

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

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

style 是 CSSPageRule 接口的一个只读属性，它返回一个 CSSPageDescriptors 对象。该对象表示 CSS @page at-rule 的 CSS 声明块，并公开了关于页面样式信息以及各种与样式相关的方法和属性。

值

一个 CSSPageDescriptors 对象，其属性与关联的 @page at-rule 匹配。

注意： 规范的早期版本将此属性定义为 CSSStyleDeclaration。请查看下面的兼容性数据以了解你的浏览器。

示例

检查页面规则

此示例使用 Web API 来检查 @page 规则的内容。

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

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

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

CSS

下面我们使用 @page 规则为页面定义样式。我们使用 margin 简写为每个 margin 属性分配不同的值，并指定 size。我们没有设置 page-orientation。这使我们能够查看属性如何在 Web API 对象中映射。

css

@page {
  margin: 1cm 2px 3px 4px;
  /* page-orientation: upright; */
  size: A4;
}

JavaScript

MDN 实时示例基础结构将示例中的所有 CSS 块合并到一个具有 id css-output 的内联样式中，因此我们首先使用 document.getElementById() 来查找该样式表。

const myRules = document.getElementById("css-output").sheet.cssRules;

然后，我们遍历为实时示例定义的规则，并匹配所有类型为 CSSPageRule 的规则，因为这些规则对应于 @page 规则。对于匹配的对象，我们记录 style 及其所有值。

for (const rule of myRules) {
  if (rule instanceof CSSPageRule) {
    log(`${rule.style}`);
    log(`margin: ${rule.style.margin}`);

    // Access properties using CamelCase properties
    log(`marginTop: ${rule.style.marginTop}`);
    log(`marginRight: ${rule.style.marginRight}`);
    log(`marginBottom: ${rule.style.marginBottom}`);
    log(`marginLeft: ${rule.style.marginLeft}`);
    log(`pageOrientation: ${rule.style.pageOrientation}`);

    // Access properties using snake-case properties
    log(`margin-top: ${rule.style["margin-top"]}`);
    log(`margin-right: ${rule.style["margin-right"]}`);
    log(`margin-left: ${rule.style["margin-left"]}`);
    log(`margin-bottom: ${rule.style["margin-bottom"]}`);
    log(`page-orientation: ${rule.style["page-orientation"]}`);

    log(`size: ${rule.style.size}`);
    log("\n");
  }
}

结果

结果如下所示。请注意，该对象应为 CSSPageDescriptors 以匹配当前规范，但在某些浏览器中可能为 CSSStyleDeclaration。另请注意，驼峰式和蛇形命名属性的相应值相互匹配并与 @page 声明匹配，并且 page-orientation 是空字符串 ""，因为它未在 @page 中定义。

规范

规范
CSS 对象模型 (CSSOM) # dom-csspagerule-style

浏览器兼容性

帮助改进 MDN

了解如何贡献

本页面最后修改于 ⁨2025年10月17日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题