Reset style properties

Question

I'm setting properties of the :root pseudo class in this manner:

$(":root")[0].style.setProperty(variable, value);

If I wanted to reset all the properties precedently set, how can I do? Without specifying every variable set, assigning empty values.

score 1 · Answer 1 · answered Apr 19 '19 at 23:54

1

Umm.. how about you use all:unset. So:

$(":root")[0].style.setProperty("all", "unset");

Demo:

h1 {
   color: red;
   all: unset;
}

<h1>Hello this should not be red nor should have default h1 styles</h1>

answered Apr 19 '19 at 23:54

Devansh J

@Keaire Yeah, doesn't work for variables. There isn't even an API to get all variables on an element. So you'll have to go through all declarations in the StyleSheet like answers [here](https://stackoverflow.com/questions/48760274/get-all-css-root-variables-in-array-using-javascript-and-change-the-values) – Devansh J Apr 20 '19 at 00:12
1

Found a way: `$(':root')[0].style = {}` Thanks anyway! – Keaire Apr 20 '19 at 00:25
@Keaire You're welcome! Won't work if the variables are declared in a stylesheet, but looks like that isn't your case. Also this is very neat hahaha xDDD – Devansh J Apr 20 '19 at 00:30

score 0 · Accepted Answer · answered Apr 20 '19 at 00:24

0

Found a way, just reset the style object:

$(':root')[0].style = {}

answered Apr 20 '19 at 00:24

Keaire

2 Answers2