CSSPageRule: style property
The style
read-only property of the CSSPageRule
interface returns a CSSPageDescriptors
object.
This represents a CSS declaration block for a CSS @page
at-rule, and exposes style information and various style-related methods and properties for the page.
Value
A CSSPageDescriptors
object with properties that match the associated @page
at-rule.
Note: Earlier versions of the specification defined this property as a CSSStyleDeclaration
.
Check the compatibility data below for your browser.
Examples
Inspecting a page rule
This example uses the Web API to inspect the content of a @page
rule.
CSS
Below we define styles for the page using a @page
rule.
We assign different values for each margin property using the margin
shorthand, and also specify the size
.
We don't set the page-orientation
.
This allows us to see how the properties map in the Web API object.
@page {
margin: 1cm 2px 3px 4px;
/* page-orientation: upright; */
size: A4;
}
JavaScript
The code first gets the document stylesheet at index 1
, and then gets the cssRules
defined in that stylesheet.
We need to get this stylesheet because the example is embedded in a separate frame with its own sheet (index 0
is the CSS for this page).
const myRules = document.styleSheets[1].cssRules;
We then iterate through the rules defined for the live example and match any that are of type CSSPageRule
, as these correspond to @page
rules.
For the matching objects we then log the style
and all its values.
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 properties
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 properties
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("\n");
}
}
Results
The results are shown below.
Note that the object should be a CSSPageDescriptors
to match the current specification, but may be a CSSStyleDeclaration
in some browsers.
Note also that the corresponding values for properties in camel- and snake-case match each other and the @page
declaration, and that page-orientation
is the empty string ""
because it is not defined in @page
.
Specifications
Specification |
---|
CSS Object Model (CSSOM) # dom-csspagerule-style |
Browser compatibility
BCD tables only load in the browser