SVGЭлемент: свойство style

Только для чтения style свойство SVGElement возвращает встроенный стиль элемента в виде живого объекта CSSStyleDeclaration, содержащего список всех свойств стиля для этого элемента со значениями, заданными только для атрибутов, определённых во встроенном атрибуте элемента style.

Сокращенные свойства развёрнуты. Если вы установите style="border-top: 1px solid black", вместо этого будут установлены длинные свойства (border-top-color, border-top-style и border-top-width).

Это свойство является только для чтения, поэтому нельзя назначить объект CSSStyleDeclaration. Тем не менее, можно задать встроенный стиль, присвоив строку напрямую свойству style. В этом случае строка передаётся в CSSStyleDeclaration.cssText. Использование style таким образом полностью перезапишет все встроенные стили элемента.

Поэтому для добавления определённых стилей к элементу без изменения других значений стиля обычно предпочтительнее устанавливать отдельные свойства в объекте CSSStyleDeclaration. Например, вы можете написать element.style.backgroundColor = "red".

Объявление стиля сбрасывается, установив его в null или пустую строку, например, elt.style.color = null.

Живой объект CSSStyleDeclaration.

Следующий фрагмент кода демонстрирует, как атрибут style переводится в список записей в CSSStyleDeclaration:

<svg
  width="50"
  height="50"
  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="out"></pre>

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

// We loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // We check if the property belongs to the CSSStyleDeclaration instance
  // We also ensure that the property is a numeric index (indicating an inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

• Использование динамической информации о стиле
• HTMLElement.style
• MathMLElement.style
• SVGElement.attributeStyleMap