CSSPageRule

Erbt Eigenschaften von seinen Vorfahren CSSGroupingRule und CSSRule.

CSSPageRule.selectorText

Repräsentiert den Text des mit der At-Regel verbundenen Seitenselektors.

CSSPageRule.style Schreibgeschützt

Gibt den Deklarationsblock zurück, der mit der At-Regel assoziiert 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 wurden.

<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, protokolliert den Blattindex, die Anzahl der Regeln und den Typ jedes Regelobjekts. Wir erkennen dann CSSPageRule-Objekte, indem wir ihren Typ detektieren (ohne etwas mit der Information zu machen).

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 werden unten gezeigt. Wie Sie sehen, gibt es zwei Blätter, die diesem Hauptdokument und dem Beispiel-Code-Frame entsprechen, und jedes hat eine Reihe von Regeln, von denen nur eine unsere CSSPageRule ist.