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 Schreibgeschützt

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, 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 mithilfe einer @page-Regel.

@page {
  margin: 1cm;
}

JavaScript

Der Code iteriert durch alle Stylesheets im Dokument und durch alle cssRules in jedem Stylesheet und protokolliert den Index des Stylesheets, die Anzahl der Regeln und den Typ jedes Regelobjekts. Wir erkennen dann CSSPageRule-Objekte anhand ihres Typs (ohne Informationen damit zu verarbeiten).

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
    }
  }
}

Ergebnisse

Die Ergebnisse werden unten gezeigt. Wie Sie sehen können, gibt es zwei Stylesheets, die diesem Hauptdokument und dem Beispielcodefenster entsprechen, und jedes hat eine Anzahl von Regeln, von denen nur eine unsere CSSPageRule ist.