CSSStyleProperties

Instanz-Eigenschaften

Dieses Interface erbt auch Eigenschaften seiner Elternklasse, CSSStyleDeclaration.

Benannte Eigenschaften

Bindestrich-benannte und camelCase-benannte Eigenschaften für alle vom Browser unterstützten CSS-Eigenschaften.

CSSStyleProperties.cssFloat

Spezieller Alias für die float-CSS-Eigenschaft.

Instanz-Methoden

Dieses Interface erbt die Methoden seiner Elternklasse, CSSStyleDeclaration.

Beschreibung

Ein Objekt dieser Art hat bindestrich-benannte Eigenschaften für alle vom Browser unterstützten CSS-Eigenschaften, einschließlich Kurzschreibweisen und Langschreibweisen sowie solchen mit -moz und -webkit Präfixen. Diese können mit Methoden aufgerufen werden, die von der Basisklasse CSSStyleDeclaration geerbt werden, wie z.B. getPropertyValue() und setPropertyValue().

Darüber hinaus hat jede Bindestrich-benannte Eigenschaft eine entsprechende camelCase-benannte Eigenschaft, wobei der Name entsteht, indem die Bindestriche entfernt und jedes Wort nach dem ersten großgeschrieben wird. Dies ermöglicht Ihnen beispielsweise den Zugriff auf die margin-top-CSS-Eigenschaft mit der Syntax style.marginTop (wobei style ein CSSStyleProperties ist), anstelle der umständlicheren style.getPropertyValue("margin-top") oder style["margin-top"]. Die CSS-Eigenschaft float, ein reserviertes JavaScript-Schlüsselwort, wird durch die Eigenschaft cssFloat repräsentiert.

Kurzschreibweise-CSS-Eigenschaften des Elements werden zu ihren entsprechenden Langform-Eigenschaften erweitert. Ein Element mit dem Stil "border-top: 1px solid black" würde beispielsweise im zurückgegebenen Objekt durch Eigenschaften mit den Namen border-top und borderTop, und den entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, sowie border-top-width und borderTopWidth dargestellt werden.

Eigenschaften und Attribute ohne definierten Wert werden standardmäßig auf den leeren String ("") gesetzt. Für ein Objekt, das eine Inline-Stilerklärung (nicht berechnete Stile) darstellt, gilt dies für jeden Stil, der im Deklarationsblock nicht definiert ist.

CSSStyleProperties-Objektinstanzen werden über folgende APIs bereitgestellt:

• HTMLElement.style, SVGElement.style und MathMLElement.style: Wird verwendet, um den Inline-Stil eines einzelnen Elements zu erhalten und zu setzen (z. B. <div style="…">).
• Window.getComputedStyle(): Wird verwendet, um den (nur lesbaren) berechneten Stil eines Elements zu erhalten, der sowohl Inline- als auch externe Stile umfasst.
• CSSStyleRule.style: Wird verwendet, um die Stile einer Stilregel (CSSStyleRule) zu erhalten und zu setzen.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie lokale und berechnete Elementstile sowohl mit camelCase- als auch mit Bindestrich-benannten Eigenschaften abgerufen und gesetzt werden.

HTML

Das HTML definiert ein <div> mit einer Reihe von festgelegten Stilen, eingebettet in ein weiteres, das font-weight als bold setzt.

<div style="font-weight: bold;">
  <div style="border-top: 3px solid blue; color: red;margin:5px;" id="elt">
    Div content.
    <br />
    Inner: "border-top: 3px solid blue; color: red;margin:5px;".
    <br />
    Outer: "font-weight: bold;"
  </div>
</div>

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

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

JavaScript

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

Zuerst holen wir den lokalen und berechneten Stil für das Element mit der ID "elt".

const element = document.querySelector("#elt");
const elementStyle = element.style;
const computedStyle = window.getComputedStyle(element);

Dann holen wir die Kurzschreibweiseigenschaft borderTop der CSSStyleProperties mit der Punktnotation sowohl für lokale als auch berechnete Stile. Die Verwendung der Punktnotation mit einer camelCase-Eigenschaft ist der einfachste Weg, auf jede Eigenschaft zuzugreifen.

// Get style using dot notation
const elemBorderTop = elementStyle.borderTop;
const compBorderTop = computedStyle.borderTop;

log('Format: Style = "Element" / "Computed"');
log(`"borderTop" = "${elemBorderTop}" / "${compBorderTop}"'`);

Wir können dieselbe Eigenschaft auch mit der Methode getPropertyValue() oder der Klammernotation abrufen.

// Get style using dashed-name property value
const elemBorderTop = elementStyle.getPropertyValue("border-top");
const compBorderTop = computedStyle.getPropertyValue("border-top");
log(`"border-top" = "${elemBorderTop}" / "${compBorderTop}"'`);

Der folgende Code holt jede der Langform-Eigenschaften, die der Kurzschreibweiseigenschaft border-top entsprechen, und verwendet dabei der Einfachheit halber die Punktnotation.

// Get shorthand properties using dot notation
const elemBorderTopWidth = elementStyle.borderTopWidth;
const compBorderTopWidth = computedStyle.borderTopWidth;
log(`"borderTopWidth" = "${elemBorderTopWidth}" / "${compBorderTopWidth}"'`);

const elemBorderTopColor = elementStyle.borderTopColor;
const compBorderTopColor = computedStyle.borderTopColor;
log(`"borderTopColor" = "${elemBorderTopColor}" / "${compBorderTopColor}"'`);

const elemBorderTopStyle = elementStyle.borderTopStyle;
const compBorderTopStyle = computedStyle.borderTopStyle;
log(`"borderTopStyle" = "${elemBorderTopStyle}" / "${compBorderTopStyle}"'`);

const elemFontWeight = elementStyle.fontWeight;
const compFontWeight = computedStyle.fontWeight;
log(`"fontWeight" = "${elemFontWeight}" / "${compFontWeight}"'`);

Abschließend demonstrieren wir, wie Sie die Punktnotation verwenden können, um einen Eigenschaftswert zu setzen. In der folgenden Ergebnissektion werden Sie feststellen, dass die untere Grenze des Elements eine solide grüne Linie ist.

// Set the bottom border style using dot notation
elementStyle.borderBottom = "5px solid green";

Ergebnisse

Die Ergebnisse werden unten gezeigt. Beachten Sie, wie die Werte aus den entsprechenden camelCase- (borderTop) und Bindestrich-benannten (border-top) Eigenschaften gleich sind. Die lokalen und berechneten Werte für die Langform-Eigenschaften sind oft auch gleich, außer dass berechnete Eigenschaften die rgb()-Syntax für Farben verwenden und zusätzlich Stile umfassen, die auf dem übergeordneten <div>-Element gesetzt sind, wie beispielsweise das font-weight.

Aufzählung der Bindestrich-benannten Stileigenschaften

Dieses Beispiel zeigt, wie die Werte der Bindestrich-benannten Eigenschaften eines Elements sowohl für den Inline- als auch den berechneten Stil aufgezählt werden können.

HTML

Das HTML definiert ein <div> mit einer Reihe von festgelegten Stilen, eingebettet in ein weiteres, das das font-weight setzt. Es gibt auch Schaltflächen, um die Inline-Stile und berechneten Stile für das Element zu erhalten (und versteckter Code für eine Reset-Schaltfläche und das Protokollieren).

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
</div>
<button id="inline_style" type="button">Inline Style</button>
<button id="computed_style" type="button">Computed Style</button>

<button id="reset" type="button">Reset</button>
<pre id="log"></pre>

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

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

function clearLog(text) {
  logElement.innerText = "";
}

const reload = document.querySelector("#reset");

reload.addEventListener("click", () => {
  clearLog();
});

JavaScript

Der Code definiert zunächst die Funktion, die wir verwenden werden, um die Eigenschaften unseres Elements mit der ID elt aufzulisten. Dies verwendet CSSStyleDeclaration.getPropertyValue(), um den Wert jeder Bindestrich-benannten Eigenschaft zu erhalten, die dem Objekt gehört, das einen numerischen Index hat.

function getPopulatedProperties(elementStyles) {
  for (const prop in elementStyles) {
    if (
      // Check the property belongs to the CSSStyleProperties instance
      // Check property has a numeric index (indicates inline/dash-named style)
      Object.hasOwn(elementStyles, prop) &&
      !Number.isNaN(Number.parseInt(prop, 10))
    ) {
      log(
        `${elementStyles[prop]} = '${elementStyles.getPropertyValue(
          elementStyles[prop],
        )}'`,
      );
    }
  }
}

Der folgende Code überprüft und protokolliert, ob CSSStyleProperties definiert ist. Wenn es existiert, erstellen wir Button-Event-Handler, um die Inline- oder berechneten Stile für das Element zu erhalten und deren Namen und Werte zu protokollieren.

if (typeof window.CSSStyleProperties === "undefined") {
  log("CSSStyleProperties is not supported on this browser.");
} else {
  const element = document.querySelector("#elt");

  const inlineStyle = document.querySelector("#inline_style");
  inlineStyle.addEventListener("click", () => {
    clearLog();
    const elementStyle = element.style;
    getPopulatedProperties(elementStyle);
  });

  const computedStyle = document.querySelector("#computed_style");
  computedStyle.addEventListener("click", () => {
    clearLog();
    const compStyles = window.getComputedStyle(element);
    getPopulatedProperties(compStyles);
  });
}

Ergebnisse

Drücken Sie die Schaltflächen, um die Bindestrich-benannten Eigenschaftsnamen und -werte für die Inline- und berechneten Stile des Elements anzuzeigen. Beachten Sie, dass die Inline-Stile nur die auf dem tatsächlichen Element definierten Stile umfassen: Alle anderen Eigenschaften haben den Wert "" und werden nicht angezeigt. Die berechneten Stile umfassen auch font-weight, das auf dem übergeordneten Element definiert ist, sowie viele andere berechnete Stile.

Spezifikationen

Browser-Kompatibilität