Can JavaScript Access Custom CSS Properties with Invalid Names?

Accessing Invalid Custom CSS Properties from JavaScript

It is possible to create custom CSS properties using the - prefix. However, can these custom properties be accessed from JavaScript?

The answer is unfortunately no, at least in major browsers like Chrome and Firefox. Custom CSS properties with invalid names are simply ignored by the CSS parser. For instance, consider the following CSS:

<code class="css">div {
    -my-foo: 42;
}</code>

Even if this CSS is applied to a div, attempting to access the -my-foo property using JavaScript will return nothing. The CSSStyleDeclaration object will only contain valid properties, such as width or height.

This behavior is in accordance with the CSSStyleDeclaration specifications. The specs state that the object should only include "specified properties," which implies that custom properties are not recognized. However, some implementations may support accessing custom properties, but this is not guaranteed.

If accessing custom CSS properties is crucial for your application, you can bypass the limitations of JavaScript by parsing the raw CSS text. This can be done using the innerText property of the style element:

<code class="js">document.getElementsByTagName("style")[0].innerText</code>

While this approach works, it is not as straightforward as accessing the properties directly from the CSSStyleDeclaration object. Moreover, it requires additional parsing and manipulation of the CSS text.

The above is the detailed content of Can JavaScript Access Custom CSS Properties with Invalid Names?. For more information, please follow other related articles on the PHP Chinese website!