CSSPageRule

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.

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

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

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

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 (const rule of myRules) {
    log(`rule: ${rule}`);
    if (rule 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

• CSS Object Model (CSSOM)