CSSPageRule
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSSPageRule
represents a single CSS @page
rule.
Instance properties
Inherits properties from its ancestors CSSGroupingRule
and CSSRule
.
CSSPageRule.selectorText
-
Represents the text of the page selector associated with the at-rule.
CSSPageRule.style
Read only-
Returns the declaration block associated with the at-rule.
Instance methods
Inherits methods from its ancestors CSSGroupingRule
and CSSRule
.
Examples
Filtering for page rules
This example shows how you can find CSSPageRule
objects for @page
rules loaded by the document.
CSS
Below we define styles for the page using a @page
rule.
@page {
margin: 1cm;
}
JavaScript
The code iterates through all the sheets in the document, and through all the cssRules
in each sheet, logging the sheet index, the number of rules, and the type of each rule object.
We then detect CSSPageRule
objects using their type (doing nothing with the information).
for (
let sheetCount = 0;
sheetCount < document.styleSheets.length;
sheetCount++
) {
const sheet = document.styleSheets[sheetCount].cssRules;
log(`styleSheet: ${sheetCount}`);
const myRules = document.styleSheets[sheetCount].cssRules;
log(`rules: ${myRules.length}`);
for (let i = 0; i < myRules.length; i++) {
log(`rule: ${myRules[i]}`);
if (myRules[i] instanceof CSSPageRule) {
//... Do something with CSSPageRule
}
}
}
Results
The results are shown below.
As you can see there are a two sheets, corresponding to this main document and the example code frame, and each have a number of rules, only one of which is our CSSPageRule
.
Specifications
Specification |
---|
CSS Object Model (CSSOM) # the-csspagerule-interface |
Browser compatibility
BCD tables only load in the browser