Getting a custom variable by dot notation

Question

Is there any way to access to a custom variable through dot notation (or bracket) instead of doing the getComputedStyle and getPropertyValue methods? In example (I know it's not the best way):

let darkColor = getComputedStyle(document.documentElement).getPropertyValue('--dark-color'); 
console.log(darkColor)

:root {
  --dark-color: black;
}

Is there any way to dont use those methods and write something like document.documentElement.style['--dark-color']? (this one doesn't work, but just for getting the idea). I am curious at it because you can access to regular attributes like color or background-color through the dot notation but not for custom variables.

t.niese · Accepted Answer · 2021-09-09 20:13:49Z

You can get the applied custom properties only using getComputedStyle and getPropertyValue.

element.style[someProperty] and getComputedStyle(element)[someProperty] are not equivalent.

element.style gives you the property directly assigned to the element (not what is currently applied, which can be different).

And your :root { --dark-color: black; } is applied through the stylesheet and not at the element directly.

getComputedStyle returns a CSSStyleDeclaration where the values of the properties reflect the result of all applied rules. To get the correct custom property you need getComputedStyle, so you can't get rid of that.

For getComputedStyle(element).getPropertyValue(name) compared to getComputedStyle(element)[name] part.

The dot notation or array access is not possible for custom properties. That access is given by this part of the specification:

For each CSS property property that is a supported CSS property, the following partial interface applies where camel-cased attribute is obtained by running the CSS property to IDL attribute algorithm for property.
partial interface CSSStyleDeclaration {  
  [CEReactions] attribute [LegacyNullToEmptyString] CSSOMString 
  _camel_cased_attribute;
};
The camel-cased attribute attribute, on getting, must return the result of invoking getPropertyValue() with the argument being the result of running the IDL attribute to CSS property algorithm for camel-cased attribute.

And supported CSS property is specified as:

[…] The term supported CSS property* refers to a CSS property that the user agent implements, including any vendor-prefixed properties, but excluding custom properties. […]

Collectives™ on Stack Overflow

Getting a custom variable by dot notation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related