CSSPageDescriptors

实验性: 这是一个 实验性技术
在生产环境中使用之前,请仔细查看 浏览器兼容性表

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

该接口公开了页面的样式信息以及各种与样式相关的属性和方法。每个多单词属性都有驼峰式和蛇形大小写版本。这意味着,例如,您可以使用语法 style["margin-top"]style.marginTop 访问 margin-top CSS 属性(其中 styleCSSPageDescriptor)。

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

CSSStyleDeclaration CSSPageDescriptors

属性

此接口还继承了其父级 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 的方法。

示例

检查页面 at-rule

此示例获取 @page at-rule 的 CSSPageDescriptors(如果浏览器支持该对象),然后记录其属性。

CSS

下面我们使用 @page at-rule 定义页面的样式。我们使用 margin 速记为每个边距属性分配不同的值,并指定 size。我们不设置 page-orientation。这使我们能够查看属性如何在 Web API 对象中映射。

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

JavaScript

首先,我们检查 CSSPageDescriptors 是否在全局窗口对象上定义,如果未定义,则记录该接口不受支持。

如果支持 CSSPageDescriptors,我们获取索引为 1 的文档样式表,然后获取该样式表中定义的 cssRules。我们需要获取此样式表,因为该示例嵌入在一个单独的框架中,该框架有自己的样式表(索引 0 是此页面的 CSS)。

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

js
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.styleSheets[1].cssRules;
  for (let i = 0; i < myRules.length; i++) {
    if (myRules[i] instanceof CSSPageRule) {
      log(`${myRules[i].style}`);
      log(`margin: ${myRules[i].style.margin}`);

      // Access properties using CamelCase syntax
      log(`marginTop: ${myRules[i].style.marginTop}`);
      log(`marginRight: ${myRules[i].style.marginRight}`);
      log(`marginBottom: ${myRules[i].style.marginBottom}`);
      log(`marginLeft: ${myRules[i].style.marginLeft}`);
      log(`pageOrientation: ${myRules[i].style.pageOrientation}`);

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

      log(`size: ${myRules[i].style.size}`);

      // Log the original CSS text using inherited property: cssText
      log(`cssText: ${myRules[i].style.cssText}`);
      log("\n");
    }
  }
}

结果

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

规范

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

浏览器兼容性

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