SVGElement: style property

Wert

Ein lebendiges CSSStyleProperties Objekt.

Beschreibung

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

Kurzfassung-CSS-Eigenschaften des Elements werden auf 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 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, was bedeutet, dass es nicht möglich ist, ein CSSStyleProperties Objekt zuzuweisen. Es ist jedoch möglich, einen Inline-Stil zu setzen, indem Sie direkt eine Zeichenkette der Eigenschaft zuweisen. In diesem Fall kann die Zeichenkette aus cssText gelesen werden. Die Verwendung von style auf diese Weise wird alle Inline-Stile des Elements vollständig überschreiben.

Um einem Element spezifische Stile hinzuzufügen, ohne andere Stilwerte zu verändern, ist es allgemein vorzuziehen, einzelne Eigenschaften im CSSStyleProperties Objekt zu setzen. 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

Stilinformationen auflisten

Dieses Beispiel zeigt, wie wir die Bindestrich-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 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 ist unten zu sehen. 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 dynamischer Stilinformationen
• HTMLElement.style
• MathMLElement.style
• SVGElement.attributeStyleMap