CSSPageRule: style Eigenschaft

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Die style schreibgeschützte Eigenschaft der CSSPageRule-Schnittstelle gibt ein CSSPageDescriptors-Objekt zurück. Dies repräsentiert einen CSS-Deklarationsblock für eine CSS @page At-Regel und bietet Informationen zu Stilen sowie verschiedene stilbezogene Methoden und Eigenschaften für die Seite.

Wert

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

Hinweis: Frühere Versionen der Spezifikation definierten diese Eigenschaft als CSSStyleDeclaration. Überprüfen Sie die Kompatibilitätsdaten unten für Ihren Browser.

Beispiele

Inspizieren einer Seiteneigenschaft-Regel

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

<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 verschiedene Werte für jede Margin-Eigenschaft mit der margin-Kurzform zu und geben auch die size an. Wir setzen die page-orientation nicht. Dies ermöglicht es uns zu sehen, wie die Eigenschaften im Web-API-Objekt zugeordnet sind.

css

@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 Blatt zu finden.

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

Wir iterieren dann durch die für das Live-Beispiel definierten Regeln und finden alle, die vom Typ CSSPageRule sind, da diese @page-Regeln entsprechen. Für die passenden Objekte loggen wir dann den style und alle 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 sind unten dargestellt. Beachten Sie, dass das Objekt ein CSSPageDescriptors sein sollte, um der aktuellen Spezifikation zu entsprechen, aber in einigen Browsern ein CSSStyleDeclaration sein kann. Beachten Sie auch, dass die entsprechenden Werte für Eigenschaften in CamelCase und SnakeCase einander und der @page-Deklaration entsprechen und dass page-orientation der leere String "" ist, da es in @page nicht definiert ist.

Spezifikationen

Specification
CSS Object Model (CSSOM) # dom-csspagerule-style

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden