SVGElement: style-Eigenschaft

Wert

Ein Live-Objekt von CSSStyleProperties.

Beschreibung

Die Werte der Inline-Stile, die im style-Attribut des Elements gesetzt sind, werden durch entsprechende Eigenschaften des zurückgegebenen CSSStyleProperties-Objekts widergespiegelt.

Kurzbefehle für CSS-Eigenschaften des Elements werden in ihre entsprechenden Langformen aufgeschlüsselt. Zum Beispiel würde ein Element mit dem Stil "border-top: 1px solid black" im zurückgegebenen Objekt durch Eigenschaften mit den Namen border-top und borderTop sowie die entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, und border-top-width und borderTopWidth dargestellt.

Die style-Eigenschaft ist schreibgeschützt, das heißt, es ist nicht möglich, ein CSSStyleProperties-Objekt ihr zuzuweisen. Dennoch ist es möglich, einen Inline-Stil zu setzen, indem man direkt einen String der Eigenschaft zuweist. In diesem Fall kann der String von cssText gelesen werden. Die Verwendung von style auf diese Weise überschreibt alle Inline-Stile des Elements vollständig.

Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu ändern, ist es im Allgemeinen vorzuziehen, einzelne Eigenschaften auf dem CSSStyleProperties-Objekt zu setzen. Zum Beispiel können Sie element.style.backgroundColor = "red" schreiben. Eine Stildeklaration wird durch Setzen auf null oder einen leeren String zurückgesetzt, z. B. element.style.color = null.

Die style-Eigenschaft hat dieselbe Priorität in der CSS-Kaskade wie eine Inline-Stildeklaration, die über das style-Attribut gesetzt wird.

Beispiele

Aufzählung von Stilinformationen

Dieses Beispiel zeigt, wie wir die mit Bindestrichen benannten Eigenschaften von CSSStyleProperties auflisten können.

HTML

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle
    cx="100"
    cy="100"
    r="50"
    id="circle"
    style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>
<pre id="log"></pre>

#log {
  height: 70px;
  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;
}

Der folgende Code iteriert über die aufzählbaren Eigenschaften der CSSStyleProperties und protokolliert das Ergebnis.

const element = document.querySelector("circle");
const elementStyle = element.style;

// Loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // Check the property belongs to the CSSStyleProperties instance
  // Ensure the property is a numeric index (indicating a dash-named/inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop, 10))
  ) {
    log(
      `${
        elementStyle[prop]
      } = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,
    );
  }
}

Ergebnisse

Das Ergebnis wird unten gezeigt. Beachten Sie, dass nur die Langform-CSS-Eigenschaften des Elements aufgezählte Werte sind (die Inline-Kurzform-Eigenschaft wird nicht aufgezählt).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung dynamischer Stilinformationsdaten
• HTMLElement.style
• MathMLElement.style
• SVGElement.attributeStyleMap