CSSPageRule

Instanz-Eigenschaften

Erbt Eigenschaften von seinen Vorfahren CSSGroupingRule und CSSRule.

CSSPageRule.selectorText

Repräsentiert den Text des Seitenselektors, der mit der At-Regel verbunden ist.

CSSPageRule.style Schreibgeschützt

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

Instanz-Methoden

Erbt Methoden von seinen Vorfahren CSSGroupingRule und CSSRule.

Beispiele

Filtern nach Seitenregeln

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 durchläuft alle Stylesheets im Dokument und alle cssRules in jedem Sheet, protokolliert den Sheet-Index, die Anzahl der Regeln und den Typ jedes Regelobjekts. 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 (const rule of myRules) {
    log(`rule: ${rule}`);
    if (rule instanceof CSSPageRule) {
      // Do something with CSSPageRule
    }
  }
}

Ergebnisse

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

Spezifikationen

Browser-Kompatibilität