CSSPageRule: style-Eigenschaft

Wert

Ein CSSPageDescriptors-Objekt mit Eigenschaften, die der zugehörigen @page At-Regel entsprechen.

Beispiele

Untersuchung einer Page-Regel

Dieses Beispiel nutzt die Web-API, um den Inhalt einer @page-Regel zu untersuchen.

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

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

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

CSS

Unten definieren wir Stile für die Seite unter Verwendung einer @page-Regel. Wir weisen jedem Rand-Eigenschaft einen anderen Wert unter Verwendung der margin-Kurzschrift zu und spezifizieren auch die size. Wir setzen die page-orientation nicht fest. Damit können wir sehen, wie die Eigenschaften im Web-API-Objekt zugeordnet werden.

@page {
  margin: 1cm 2px 3px 4px;
  /* page-orientation: upright; */
  size: A4;
}

JavaScript

Die MDN-Live-Beispiel-Infrastruktur kombiniert alle CSS-Blöcke im Beispiel zu einem einzigen Inline-Stil mit der ID css-output, daher verwenden wir zuerst document.getElementById(), um dieses Stylesheet zu finden.

const myRules = document.getElementById("css-output").sheet.cssRules;

Dann durchlaufen wir die im Live-Beispiel definierten Regeln und suchen nach solchen vom Typ CSSPageRule, da diese den @page-Regeln entsprechen. Für die passenden Objekte protokollieren wir dann den style und all seine Werte.

for (const rule of myRules) {
  if (rule instanceof CSSPageRule) {
    log(`${rule.style}`);
    log(`margin: ${rule.style.margin}`);

    // Access properties using CamelCase properties
    log(`marginTop: ${rule.style.marginTop}`);
    log(`marginRight: ${rule.style.marginRight}`);
    log(`marginBottom: ${rule.style.marginBottom}`);
    log(`marginLeft: ${rule.style.marginLeft}`);
    log(`pageOrientation: ${rule.style.pageOrientation}`);

    // Access properties using snake-case properties
    log(`margin-top: ${rule.style["margin-top"]}`);
    log(`margin-right: ${rule.style["margin-right"]}`);
    log(`margin-left: ${rule.style["margin-left"]}`);
    log(`margin-bottom: ${rule.style["margin-bottom"]}`);
    log(`page-orientation: ${rule.style["page-orientation"]}`);

    log(`size: ${rule.style.size}`);
    log("\n");
  }
}

Ergebnisse

Die Ergebnisse werden unten angezeigt. Beachten Sie, dass das Objekt ein CSSPageDescriptors sein sollte, um der aktuellen Spezifikation zu entsprechen, aber in einigen Browsern möglicherweise ein CSSStyleDeclaration ist. Beachten Sie auch, dass die entsprechenden Werte für Eigenschaften in Camel- und Snake-Case einander sowie der @page-Deklaration entsprechen und dass page-orientation die leere Zeichenfolge "" ist, da sie in @page nicht definiert wurde.

Spezifikationen

Browser-Kompatibilität