Can We Access Values of Custom or Invalid CSS Properties in JavaScript?

Accessing Values of Invalid/Custom CSS Properties from JavaScript

In the realm of web development, CSS properties are vital for styling elements. While there are numerous standard CSS properties defined, you may encounter scenarios where you want to use your own custom properties. This raises the question: can we access the values of these invalid or custom CSS properties in JavaScript?

To explore this, consider the following CSS:

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

Assuming you have such a style declaration, can you retrieve the value of the -my-foo property using JavaScript for a given div element?

Conventional Methods

Unfortunately, directly accessing the values of invalid CSS properties is not possible through conventional means. Browsers tend to ignore unrecognized or custom properties, so you will not find them listed in the CSSStyleDeclaration object. For instance, in the given CSS example, the style:CSSStyleDeclaration object will only contain the width property.

Possible Alternative

While conventional methods may not work, there is an alternative approach. You can manually parse the raw CSS text to retrieve the values of custom properties. For example, you could use the following code:

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

This code retrieves the entire raw CSS text and allows you to search for the custom property value you are interested in. Keep in mind that this method requires additional processing and may not be suitable for all scenarios.

Note:

It is worth noting that the CSSStyleDeclaration interface, as defined by the DOM-Level-2 Style spec, implies that all specified properties, including invalid ones, should be accessible through the interface. However, most browsers do not currently adhere to this part of the specification.

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