CSSPageDescriptors

Attribute

Dieses Interface erbt auch Eigenschaften seines Elternteils, CSSStyleDeclaration.

margin:

Ein String, der die margin-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

margin-top:

Ein String, der die margin-top-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

marginTop:

Ein String, der die margin-top-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

margin-right:

Ein String, der die margin-right-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

marginRight:

Ein String, der die margin-right-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

margin-bottom:

Ein String, der die margin-bottom-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

marginBottom:

Ein String, der die margin-bottom-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

margin-left:

Ein String, der die margin-left-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

marginLeft:

Ein String, der die margin-left-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

page-orientation Experimentell

Ein String, der die page-orientation-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

pageOrientation Experimentell

Ein String, der die page-orientation-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

size:

Ein String, der die size-Eigenschaft der entsprechenden @page-At-Regel repräsentiert.

Instanzmethoden

Dieses Interface erbt die Methoden seines Elternteils, CSSStyleDeclaration.

Beispiele

Untersuchen einer page-At-Regel

In diesem Beispiel wird das CSSPageDescriptors für eine @page-At-Regel abgerufen, sofern das Objekt im Browser unterstützt wird, und dann werden dessen Eigenschaften protokolliert.

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

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

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

CSS

Nachfolgend definieren wir Stile für die Seite durch eine @page-At-Regel. Wir weisen unterschiedlichen Rand-Eigenschaften Werte zu, indem wir die margin-Kurzform verwenden, und spezifizieren zudem die size. Wir setzen die page-orientation nicht. Dies ermöglicht uns zu sehen, wie die Eigenschaften im Web-API-Objekt abgebildet werden.

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

JavaScript

Zuerst überprüfen wir, ob CSSPageDescriptors auf dem globalen Window-Objekt definiert ist, und falls nicht, protokollieren wir, dass das Interface nicht unterstützt wird.

Wenn CSSPageDescriptors unterstützt wird, holen wir das Ziel-Stylesheet und erhalten dann die cssRules, die in diesem Stylesheet definiert sind. Wir müssen dieses Stylesheet abrufen, weil das Beispiel in einem separaten Frame eingebettet ist, der sein eigenes Stylesheet hat (Index 0 ist das CSS für diese Seite).

Dann iterieren wir durch die für das Live-Beispiel definierten Regeln und finden solche, die vom Typ CSSPageRule sind, da diese @page-Regeln entsprechen. Für die passenden Objekte protokollieren wir dann das style und alle seine Werte.

if (typeof window.CSSPageDescriptors === "undefined") { log("CSSPageDescriptors is not supported on this browser."); } else { // Get stylesheets for example and then get its cssRules const myRules = document.getElementById("css-output").sheet.cssRules; for (const rule of myRules) { if (rule instanceof CSSPageRule) { log(`${rule.style}`); log(`margin: ${rule.style.margin}`); // Access properties using CamelCase syntax 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 syntax 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 the original CSS text using inherited property: cssText log(`cssText: ${rule.style.cssText}`); log("\n"); } } } 

Ergebnisse

Die Ergebnisse werden unten gezeigt. Beachten Sie, dass das style-Objekt oben im Protokoll 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 Camel- und Snake-Case übereinstimmen und der @page-Deklaration entsprechen, und dass page-orientation der leere String "" ist, weil es in @page nicht definiert ist.

Spezifikationen

Browser-Kompatibilität