SVGElement: свойство attributeStyleMap

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

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

Основное различие между свойством style и свойством attributeStyleMap заключается в том, что свойство style вернёт объект CSSStyleDeclaration, а свойство attributeStyleMap вернёт объект StylePropertyMap.

Хотя само свойство не является изменяемым, вы можете читать и изменять встроенные стили через возвращаемый объект StylePropertyMap, точно так же, как через объект CSSStyleDeclaration, возвращаемый свойством style.

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

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

<div style="white-space: pre-line;">
  <svg
    width="50"
    height="50"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 250 250"
    width="250"
    height="250"
    style="white-space: pre-line;">
    <circle
      cx="100"
      cy="100"
      r="50"
      id="el"
      style="border-top: 1px solid blue; color: red;" />
  </svg>
  <div id="output"></div>
</div>

#el {
  font-size: 16px;
}

const element = document.getElementById("el");
const output = document.getElementById("output");

for (const property of element.attributeStyleMap) {
  output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;
}

• SVGElement.style
• HTMLElement.attributeStyleMap
• MathMLElement.attributeStyleMap