How to access css variable defined within css class from javascript?

Question

I have css variables defined within a css class.

.popup {
    --popup-opacity: 0;
    --popup-visibility: hidden;
    opacity: var(--popup-opacity);
    visibility: var(--popup-visibility);
}

I want to update this using javascript. The following code works if variables are within root element:

 document.documentElement.style.setProperty('--popup-opacity', 1);
 document.documentElement.style.setProperty('--popup-visibility', 'visible');

I cannot figure out how to make it work when variables are defined within the css class. Please help.

Refer to this stackoverflow.com/questions/36088655/…

Debsmita Paul
– Debsmita Paul

2020-11-02 11:50:11 +00:00
Commented Nov 2, 2020 at 11:50 — Debsmita Paul
– Debsmita Paul, Commented Nov 2, 2020 at 11:50

Quentin · Accepted Answer · 2020-11-02 11:52:33Z

1

This is how inheritance in JS works.

If you've set the value of the variable in the rule-set with the class selector then that element won't inherit from higher up the DOM.

It's the same issue you would get if you set .popup { color: red; } and then wondered why it remains red is you set document.documentElement.style.setProperty('color', "red");

Define your variables higher up the DOM:

html {
    --popup-opacity: 0;
    --popup-visibility: hidden;
}

.popup {
    opacity: var(--popup-opacity);
    visibility: var(--popup-visibility);
}

and then override them at the same level or one between it and where they are read:

 document.body.style.setProperty('--popup-opacity', 1);
 document.body.style.setProperty('--popup-visibility', 'visible');

answered Nov 2, 2020 at 11:52

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access css variable defined within css class from javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related