The read-onlystyle property of theMathMLElement interface returns theinlinestyle of an element in the form of a liveCSSStyleProperties object.This object can be used to get and set the inline styles of an element.

Value

A liveCSSStyleProperties object.

Although thestyle property itself is read-only in the sense that you can't replace theCSSStyleProperties object, you can still assign to thestyle property directly, which is equivalent to assigning to itscssText property. You can also modify theCSSStyleProperties object using thesetProperty() andremoveProperty() methods.

Description

The values of the inline styles set in the element'sstyle attribute are reflected by corresponding properties of the returnedCSSStyleProperties object.

Shorthand CSS properties of the element are expanded to their corresponding long-form properties.For example, an element with style"border-top: 1px solid black" would be represented in the returned object by properties with the namesborder-top andborderTop, and the corresponding longhand propertiesborder-top-color andborderTopColor,border-top-style andborderTopStyle, andborder-top-width andborderTopWidth.

Thestyle property is read-only, meaning it is not possible to assign aCSSStyleProperties object to it.Nevertheless, it is possible to set an inline style by assigning astring directly to the property.In this case the string can be read fromcssText.Usingstyle in this manner will completely overwrite all inline styles on the element.

To add specific styles to an element without altering other style values, it is generally preferable to set individual properties on theCSSStyleProperties object.For example, you can writeelement.style.backgroundColor = "red".A style declaration is reset by setting it tonull or an empty string, e.g.,element.style.color = null.

Thestyle property has the same priority in the CSS cascade as an inline style declaration set via thestyle attribute.

Examples

Enumerating style information

This example demonstrates how we can enumerate the dash-named properties ofCSSStyleProperties.

HTML

<math>  <mrow>    <mi>f</mi>    <mo stretchy="false">(</mo>    <mi>x</mi>    <mo stretchy="false">)</mo>    <mo>=</mo>    <mi>x</mi>  </mrow></math><pre></pre>

#log {  height: 80px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

JavaScript

The following code iterates the enumerable properties of theCSSStyleProperties and logs the result.

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

const element = document.querySelector(".parameter");const elementStyle = element.style;// Loop through all the element's styles using `for...in`for (const prop in elementStyle) {  // Check the property belongs to the CSSStyleProperties instance  // Ensure the property is a numeric index (indicating a dash-named/inline style)  if (    Object.hasOwn(elementStyle, prop) &&    !Number.isNaN(Number.parseInt(prop, 10))  ) {    log(      `${        elementStyle[prop]      } = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,    );  }}

Results

The result is shown below.Note that only the element's longhand CSS properties are enumerated values (the inline shorthand property is not enumerated).

Specifications

Browser compatibility

See also

• Using dynamic styling information
• HTMLElement.style
• SVGElement.style
• MathMLElement.attributeStyleMap