MathMLElement: свойство style

Только для чтения style свойство MathMLElement возвращает встроенный стиль элемента в виде объекта 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:

<math>
  <mrow>
    <mi>f</mi>
    <mo stretchy="false">(</mo>
    <mi class="parameter" style="color: red; border-bottom: 1px solid">x</mi>
    <mo stretchy="false">)</mo>
    <mo>=</mo>
    <mi>x</mi>
  </mrow>
</math>
<pre id="out"></pre>

const element = document.querySelector(".parameter");
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
• SVGElement.style
• MathMLElement.attributeStyleMap