CSSPageDescriptors

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

CSSPageDescriptors 接口表示一个用于 @page at-rule 的 CSS 声明块。

该接口公开了页面的样式信息以及各种与样式相关的方法和属性。每个多词属性都有驼峰式和下划线式两种写法。这意味着，例如，您可以通过 style["margin-top"] 或 style.marginTop（其中 style 是一个 CSSPageDescriptor）来访问 margin-top CSS 属性。

可以通过 CSSPageRule 接口的 style 属性访问 CSSPageDescriptors 对象，而 CSSPageRule 接口又可以通过 CSSStyleSheet API 找到。

属性

该接口还继承了其父接口 CSSStyleDeclaration 的属性。

margin: 表示相应 @page at-rule 的 margin 属性的字符串。
margin-top: 表示相应 @page at-rule 的 margin-top 属性的字符串。
marginTop: 表示相应 @page at-rule 的 margin-top 属性的字符串。
margin-right: 表示相应 @page at-rule 的 margin-right 属性的字符串。
marginRight: 表示相应 @page at-rule 的 margin-right 属性的字符串。
margin-bottom: 表示相应 @page at-rule 的 margin-bottom 属性的字符串。
marginBottom: 表示相应 @page at-rule 的 margin-bottom 属性的字符串。
margin-left: 表示相应 @page at-rule 的 margin-left 属性的字符串。
marginLeft: 表示相应 @page at-rule 的 margin-left 属性的字符串。
page-orientation 实验性: 表示相应 @page at-rule 的 page-orientation 属性的字符串。
pageOrientation 实验性: 表示相应 @page at-rule 的 page-orientation 属性的字符串。
size: 表示相应 @page at-rule 的 size 属性的字符串。

实例方法

该接口继承了其父接口 CSSStyleDeclaration 的方法。

示例

检查 page at-rule

本示例获取 @page at-rule 的 CSSPageDescriptors（如果浏览器支持该对象），然后记录其属性。

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

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

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

CSS

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

css

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

JavaScript

首先，我们检查全局 window 对象上是否定义了 CSSPageDescriptors，如果没有，则记录该接口不受支持。

如果 CSSPageDescriptors 受支持，我们获取目标样式表，然后获取该样式表中定义的 cssRules。我们需要获取此样式表，因为示例嵌入在一个具有自己样式的单独框架中（索引 0 是此页面的 CSS）。

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

if (typeof window.CSSPageDescriptors === "undefined") {
  log("CSSPageDescriptors is not supported on this browser.");
} else {
  // Get stylesheets for example and then get its cssRules
  const myRules = document.getElementById("css-output").sheet.cssRules;
  for (const rule of myRules) {
    if (rule instanceof CSSPageRule) {
      log(`${rule.style}`);
      log(`margin: ${rule.style.margin}`);

      // Access properties using CamelCase syntax
      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 syntax
      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 the original CSS text using inherited property: cssText
      log(`cssText: ${rule.style.cssText}`);
      log("\n");
    }
  }
}

结果

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

规范

规范
CSS 对象模型 (CSSOM) # csspagedescriptors

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年10月17日，作者：MDN contributors。

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