Altering a CSS attribute selector via JavaScript
-
I’ve got some CSS like
*[foo=somevalue] {…}, and I can’t find a way to use JavaScript to change this to*[foo=anothervalue] {…}. Anyone know the right incantation? I’m fine with deleting the selector entirely and then setting the new one in its place, but I also can’t find how to do that …
-
@Gurth Wait...you want to dynamically modify the selectors?
It seems you can do it (see https://stackoverflow.com/questions/1409225/changing-a-css-rule-set-from-javascript) but....it feels like a total hack and a sign there's something desperately wrong with your architecture. Can you use classes instead?
-
CSSStyleRule: selectorText property - Web APIs | MDN
The selectorText property of the CSSStyleRule interface gets and sets the selectors associated with the CSSStyleRule.
?
Though I see that Stack Ovalmaltine link @Benjamin-Hall posted is more complete than this.
-
@Benjamin-Hall said in Altering a CSS attribute selector via JavaScript:
Can you use classes instead?
Good point. I was trying to find a solution to dynamically showing and hiding stuff and had been tinkering with using attributes to identify which elements to show and hide. That must have lead me to sort of railroad myself into overlooking the obvious way to do it: just assign them all a class … Thanks :)
