CSSPageRule

Erbt Eigenschaften von seinen Vorfahren CSSGroupingRule und CSSRule.

CSSPageRule.selectorText

Repräsentiert den Text des Seiten-Selectors, der mit der At-Regel verknüpft ist.

CSSPageRule.style Nur lesbar

Gibt den Deklarationsblock zurück, der mit der At-Regel verknüpft ist.

Erbt Methoden von seinen Vorfahren CSSGroupingRule und CSSRule.

Dieses Beispiel zeigt, wie Sie CSSPageRule-Objekte für @page-Regeln finden können, die vom Dokument geladen werden.

<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

Unten definieren wir Stile für die Seite mit einer @page-Regel.

@page {
  margin: 1cm;
}

JavaScript

Der Code iteriert durch alle Blätter im Dokument und durch alle cssRules in jedem Blatt, wobei der Blattindex, die Anzahl der Regeln und der Typ jedes Regelobjekts protokolliert werden. Wir erkennen dann CSSPageRule-Objekte anhand ihres Typs (tun jedoch nichts mit der 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
    }
  }
}

Ergebnisse

Die Ergebnisse sind unten gezeigt. Wie Sie sehen können, gibt es zwei Blätter, die diesem Hauptdokument und dem Beispielcode-Rahmen entsprechen, und jedes hat eine Anzahl von Regeln, von denen nur eine unsere CSSPageRule ist.