HTMLElement: свойство attributeStyleMap

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

Кратко записанные свойства раскрываются. Если вы установите 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;">
  <div id="el" style="border-top: 1px solid blue; color: red;">
    An example element
  </div>
  <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`;
}

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