0

How can I change the value of the variables inside this block [user-theme="theme"] with JS? I have the same variables in other blocks that should not be affected because I flip between them by changing the attribute value.

[user-theme="theme"] {
   --cell-checked-in: red;
   --cell-checked-out: grey;
   --cell-online-booking: yellow;
   --cell-offline-booking: white;
}

The one solution I found that works (partly) is this one but it adds inline styles in the HTML tag which I don't want. I also can't do something like $("html[user-theme=theme]").get(0).style.setProperty("--cell-online-booking", "red");

Improve this question
6
  • 4
    Don't change the values in CSS using JS. The correct pattern to use here would be to define a new user-theme value and hook a new set of CSS rules to that, no JS involved. Commented Feb 11, 2020 at 15:45
  • @freedomn-m - this helps assuming my variables are set in :root but my variables are inside [user-theme="theme"]. How do I target that if it's possible at all. Out of interest sake. Commented Feb 11, 2020 at 16:00
  • @RoryMcCrossan - you are correct and I have been staring at this so long I've lost track of what I'm supposed to be doing and started creating problems to solve that I shouldn't have to. Commented Feb 11, 2020 at 16:02
  • 1
    "The one solution I found that works (partly) is this one but it adds inline styles in the HTML tag which I don't want." — That's how CSS variables are designed to work. You could change the rulesets themselves, but that would be needlessly complex. Commented Feb 11, 2020 at 16:02
  • $("html[user-theme=theme]").get(0).style could be simplified to document.documentElement.style Commented Feb 11, 2020 at 16:04
Related questions
4607
Setting "checked" for a checkbox with jQuery
3163
How can I upload files asynchronously with jQuery?
2731
Scroll to an element with jQuery
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.