CSSPageDescriptors

Dieses Interface erbt auch Eigenschaften seines Elternteils, 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.

Dieses Interface erbt die Methoden seines Elternteils, CSSStyleDeclaration.

Dieses Beispiel ruft die CSSPageDescriptors für eine @page-Regel ab, wenn das Objekt im Browser unterstützt wird, und protokolliert dann dessen 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

Hier definieren wir Stile für die Seite mit einer @page-Regel. Wir weisen jedem Margin-Attribut unterschiedliche Werte mit der Kurzschreibweise margin zu und geben auch die size an. Wir legen die page-orientation nicht fest. Dadurch 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

Zuerst prüfen wir, ob CSSPageDescriptors als globales Objekt verfügbar ist. Falls nicht, wird protokolliert, dass das Interface nicht unterstützt wird.

Wenn CSSPageDescriptors unterstützt wird, greifen wir auf das Stylesheet des Dokuments mit Index 1 zu und rufen die in diesem Stylesheet definierten cssRules ab. Dieses Stylesheet muss abgerufen werden, da das Beispiel in einem separaten Frame eingebettet ist, der sein eigenes Stylesheet verwendet (Index 0 enthält das CSS für diese Seite).

Anschließend iterieren wir durch die in diesem Live-Beispiel definierten Regeln und prüfen, ob sie vom Typ CSSPageRule sind, da diese @page-Regeln entsprechen. Für die passenden Objekte protokollieren wir die style-Eigenschaften und ihre 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 werden unten angezeigt. Beachten Sie, dass das oben im Protokoll angezeigte style-Objekt gemäß der aktuellen Spezifikation ein CSSPageDescriptors sein sollte, aber in einigen Browsern möglicherweise ein CSSStyleDeclaration ist. Beachten Sie auch, dass die Werte für Eigenschaften in Camel- und Snake-Case zueinander und zur @page-Deklaration passen und dass page-orientation ein leerer String ("") ist, da es in @page nicht definiert wurde.