SVGElement: style-Eigenschaft

Wert

Ein aktives CSSStyleProperties-Objekt.

Obwohl die style-Eigenschaft selbst in dem Sinne schreibgeschützt ist, dass Sie das CSSStyleProperties-Objekt nicht ersetzen können, können Sie dennoch direkt der style-Eigenschaft zuweisen, was dem Zuweisen zur cssText-Eigenschaft entspricht. Sie können das CSSStyleProperties-Objekt auch mit den Methoden setProperty() und removeProperty() modifizieren.

Beschreibung

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

Shorthand-CSS-Eigenschaften des Elements werden in ihre entsprechenden Langform-Eigenschaften erweitert. 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, und die entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, sowie border-top-width und borderTopWidth repräsentiert werden.

Die style-Eigenschaft ist schreibgeschützt, was bedeutet, dass es nicht möglich ist, ihr ein CSSStyleProperties-Objekt zuzuweisen. Nichtsdestotrotz ist es möglich, einen Inline-Stil zu setzen, indem direkt eine Zeichenkette zugewiesen wird. In diesem Fall kann die Zeichenkette aus cssText gelesen werden. Die Verwendung von style auf diese Weise wird alle Inline-Stile auf dem Element vollständig überschreiben.

Um einem Element spezifische Stile hinzuzufügen, ohne andere Stilwerte zu verändern, ist es im Allgemeinen vorzuziehen, einzelne Eigenschaften auf dem CSSStyleProperties-Objekt festzulegen. Zum Beispiel können Sie element.style.backgroundColor = "red" schreiben. Eine Stil-Deklaration wird zurückgesetzt, indem sie auf null oder eine leere Zeichenkette gesetzt wird, z.B. element.style.color = null.

Die style-Eigenschaft hat die gleiche Priorität in der CSS-Kaskade wie eine Inline-Stil-Deklaration, die über das style-Attribut gesetzt wurde.

Beispiele

Auflisten von Stilinformationen

Dieses Beispiel demonstriert, wie wir die dash-benannten Eigenschaften von CSSStyleProperties aufzählen 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 die aufzählbaren Eigenschaften der CSSStyleProperties und gibt das Ergebnis aus.

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 als Werte aufgezählt werden (die Inline-Kurzform-Eigenschaft wird nicht aufgezählt).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von dynamischen Stilinformationen
• HTMLElement.style
• MathMLElement.style
• SVGElement.attributeStyleMap