CSSPageDescriptors

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Objekt, CSSStyleDeclaration.

margin Experimentell

Ein String, der die margin-Eigenschaft der entsprechenden @page Regel darstellt.

margin-top Experimentell

Ein String, der die margin-top Eigenschaft der entsprechenden @page Regel darstellt.

marginTop Experimentell

Ein String, der die margin-top Eigenschaft der entsprechenden @page Regel darstellt.

margin-right Experimentell

Ein String, der die margin-right Eigenschaft der entsprechenden @page Regel darstellt.

marginRight Experimentell

Ein String, der die margin-right Eigenschaft der entsprechenden @page Regel darstellt.

margin-bottom Experimentell

Ein String, der die margin-bottom Eigenschaft der entsprechenden @page Regel darstellt.

marginBottom Experimentell

Ein String, der die margin-bottom Eigenschaft der entsprechenden @page Regel darstellt.

margin-left Experimentell

Ein String, der die margin-left Eigenschaft der entsprechenden @page Regel darstellt.

marginLeft Experimentell

Ein String, der die margin-left Eigenschaft der entsprechenden @page Regel darstellt.

page-orientation Experimentell

Ein String, der die page-orientation Eigenschaft der entsprechenden @page Regel darstellt.

pageOrientation Experimentell

Ein String, der die page-orientation Eigenschaft der entsprechenden @page Regel darstellt.

size Experimentell

Ein String, der die size Eigenschaft der entsprechenden @page Regel darstellt.

Diese Schnittstelle erbt die Methoden ihres übergeordneten Objekts, CSSStyleDeclaration.

Dieses Beispiel erhält die CSSPageDescriptors für eine @page Regel, wenn das Objekt im Browser unterstützt wird, und protokolliert dann seine Eigenschaften.

<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

Unten definieren wir Stile für die Seite mit einer @page Regel. Wir weisen jeder Margin-Eigenschaft unterschiedliche Werte zu, indem wir die Kurznotation margin verwenden, und spezifizieren auch die size. Wir setzen die page-orientation nicht. Dies ermöglicht es 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 im globalen window-Objekt definiert ist. Falls nicht, protokollieren wir, dass die Schnittstelle nicht unterstützt wird.

Wenn CSSPageDescriptors unterstützt wird, holen wir das Dokument-Stylesheet bei Index 1 und erhalten dann die in diesem Stylesheet definierten cssRules. Wir müssen dieses Stylesheet abrufen, da das Beispiel in einem separaten Frame mit eigenem Stylesheet eingebettet ist (Index 0 ist das CSS für diese Seite).

Wir iterieren dann durch die für das Live-Beispiel definierten Regeln und suchen nach solchen, die vom Typ CSSPageRule sind, da diese den @page Regeln entsprechen. Für die übereinstimmenden Objekte protokollieren wir dann den 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.styleSheets[1].cssRules;
  for (let i = 0; i < myRules.length; i++) {
    if (myRules[i] instanceof CSSPageRule) {
      log(`${myRules[i].style}`);
      log(`margin: ${myRules[i].style.margin}`);

      // Access properties using CamelCase syntax
      log(`marginTop: ${myRules[i].style.marginTop}`);
      log(`marginRight: ${myRules[i].style.marginRight}`);
      log(`marginBottom: ${myRules[i].style.marginBottom}`);
      log(`marginLeft: ${myRules[i].style.marginLeft}`);
      log(`pageOrientation: ${myRules[i].style.pageOrientation}`);

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

      log(`size: ${myRules[i].style.size}`);

      // Log the original CSS text using inherited property: cssText
      log(`cssText: ${myRules[i].style.cssText}`);
      log("\n");
    }
  }
}

Ergebnisse

Die Ergebnisse sind unten dargestellt. Beachten Sie, dass das style-Objekt oben im Protokoll ein CSSPageDescriptors sein sollte, um der aktuellen Spezifikation zu entsprechen, aber in einigen Browsern könnte es ein CSSStyleDeclaration sein. Beachten Sie auch, dass die entsprechenden Werte für Eigenschaften in Camel-Case und Snake-Case einander und der @page Deklaration entsprechen, und dass page-orientation die leere Zeichenkette "" ist, da sie in @page nicht definiert ist.