MathMLElement: style 属性

MathMLElement 的只读 style 属性返回元素的内联样式，它以一个动态的 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。

注意： CSS 属性名称会根据以下规则转换为 JavaScript 标识符

  • 如果属性由一个单词组成，它将保持原样：height 保持原样（小写）。
  • 如果属性由多个单词组成，并用连字符分隔，则会删除连字符并将其转换为驼峰式命名法：background-attachment 将变为 backgroundAttachment。
  • 属性 float 是一个保留的 JavaScript 关键字，因此将转换为 cssFloat。

style 属性在 CSS 优先级中与通过 style 属性设置的内联样式声明具有相同的优先级。

值

一个动态的 CSSStyleDeclaration 对象。

示例

获取样式信息

以下代码片段演示了如何将 style 属性转换为 CSSStyleDeclaration 中的条目列表。

html
<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>
js
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`;
  }
}

规范

规范
CSS 对象模型 (CSSOM)
# dom-elementcssinlinestyle-style

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见