CSSPageDescriptors
CSSPageDescriptors
接口表示 @page
at-rule 的 CSS 声明块。
该接口公开了页面的样式信息以及各种与样式相关的属性和方法。每个多单词属性都有驼峰式和蛇形大小写版本。这意味着,例如,您可以使用语法 style["margin-top"]
或 style.marginTop
访问 margin-top
CSS 属性(其中 style
是 CSSPageDescriptor
)。
可以通过 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
的方法。
示例
检查页面 at-rule
此示例获取 @page
at-rule 的 CSSPageDescriptors
(如果浏览器支持该对象),然后记录其属性。
CSS
下面我们使用 @page
at-rule 定义页面的样式。我们使用 margin
速记为每个边距属性分配不同的值,并指定 size
。我们不设置 page-orientation
。这使我们能够查看属性如何在 Web API 对象中映射。
@page {
margin: 1cm 2px 3px 4px;
/* page-orientation: upright; */
size: A4;
}
JavaScript
首先,我们检查 CSSPageDescriptors
是否在全局窗口对象上定义,如果未定义,则记录该接口不受支持。
如果支持 CSSPageDescriptors
,我们获取索引为 1
的文档样式表,然后获取该样式表中定义的 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.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 的浏览器中加载。