How can I change CSS variable on button click?

Question

How can I make CSS change the button's box-shadow from var('--out') to var('--in') on button click, and when you click it again it'll change back to --out?

I tried doing it but whenever I click the button it just removes the whole shadow.

const btn = document.querySelector('button')
const state = '--out'
btn.addEventListener('click', _ =>{
    document.documentElement.style.setProperty(state, '--in')
})

:root{
--in: inset 25px 25px 60px rgba(0,0,0,.5);
--out: inset -25px -25px 60px rgba(0,0,0,.5);
}
.color_1{
background-color: blue;
border-radius: 200px;
height: 300px;
width: 300px;
box-shadow: var(--out);
}

<body>
<section>
<button class="color_1"/>
</section>
</body>

You would need to modify the stylesheet, or change the clasname of the element so, that the new class contains --in variable. — Teemu
– Teemu, Commented Feb 1, 2022 at 14:39
You can modify the variable too, that was your original goal. — Teemu
– Teemu, Commented Feb 1, 2022 at 16:34

Tushar Shahi · Accepted Answer · 2022-02-01 14:44:19Z

2

You are trying to change the value of one variable with another variable.

You will need getComputedStlye():

:root{
    --in: inset 25px 25px 60px red;
    --out: inset -25px -25px 60px green;
}
.color_1{
    background-color: blue;
    border-radius: 200px;
    height: 300px;
    width: 300px;
    box-shadow: var(--out);
}

<body>
<section>
<button class="color_1">

</button>

<script>
    const btn = document.querySelector('button')
    const state = '--out'
    btn.addEventListener('click', _ =>{  document.documentElement.style.setProperty(state, getComputedStyle(document.documentElement).getPropertyValue('--in'));
    });
</script>

</section>
</body>

But the ideal way would not be to change the value of your root variable. What if you need that value somewhere else. You can have separate classes for this on your element, which you add/toggle on a conditional basis.

:root{
    --in: inset 25px 25px 60px red;
    --out: inset -25px -25px 60px green;
}
.color_1{
    background-color: blue;
    border-radius: 200px;
    height: 300px;
    width: 300px;
}

.shadow1{
    box-shadow: var(--out);
}
.shadow2{
    box-shadow: var(--in);
}

<body>
<section>
<button class="color_1 shadow1">

</button>

<script>
    const btn = document.querySelector('button')
    const state = '--out'
    btn.addEventListener('click', function() {
    //this.classList.remove('shadow1');
    this.classList.toggle('shadow2');
    });
</script>

</section>
</body>

edited Feb 1, 2022 at 14:44

answered Feb 1, 2022 at 14:37

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

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

3 Comments

Moe Over a year ago

How can I make it go back to '--out' after another click?

Tushar Shahi Over a year ago

The second way would be ideal to do that. Otherwise you will have to keep a global flag.

Tushar Shahi Over a year ago

You can not do it with the first way because you are overriding the value of the --out variable and will not get it back again unless you save it somewhere which is an overkill

Justiniscoding · Accepted Answer · 2022-02-01 14:44:10Z

0

You need to use the :root selector with document.querySelector instead of document.documentElement to change the css variable. You also need to change the css to use a new --state variable that you can toggle between --in and --out with the JS code. You will also need to use getProperty to get the value of the --in or --out css variable before changing it. The following code in the script tag should fix your problem:

const btn = document.querySelector('button')
const state = '--in'
btn.addEventListener('click', _ =>{
    var root = document.querySelector(":root")
    root.style.setProperty("--state", root.style.getProperty(state))
})

And also using the following in your style tag:

:root{
    --in: inset 25px 25px 60px rgba(0,0,0,.5);
    --out: inset -25px -25px 60px rgba(0,0,0,.5);
    --state: var(--out);
}
.color_1{
    background-color: blue;
    border-radius: 200px;
    height: 300px;
    width: 300px;
    box-shadow: var(--state);
}

edited Feb 1, 2022 at 14:44

answered Feb 1, 2022 at 14:28

Justiniscoding

8319 silver badges25 bronze badges

6 Comments

Moe Over a year ago

I tried, it's not working. nothing happens on click

Justiniscoding Over a year ago

The syntax for it is you first add the property name, than the value

Justiniscoding Over a year ago

@Moe You should have a separate css variable called --state and then change it to --in or --out with the code and use it with the box-shadow property

Teemu Over a year ago

documentElement definitely is a property of document.

Justiniscoding Over a year ago

Oops, I'll edit my answer, I've never used or heard of the property myself

|

Cristik · Accepted Answer · 2022-02-01 15:03:40Z

0

Ok here's what I got for you!

It was removing --out value and setting it to --in looked like this (--out: --in;). Which is why we were seeing the box-shadow being removed
This code: document.documentElement - was not targeting your button background - change it to: btn.style.boxShadow

const btn = document.querySelector('button');
   const state = '--out'
   btn.addEventListener('click', _ =>{
       document.documentElement.style.boxShadow = 'var(--in)';
   })

edited Feb 1, 2022 at 15:03

Cristik

33.2k26 gold badges106 silver badges143 bronze badges

answered Feb 1, 2022 at 14:43

Lisa Broadhead

12 bronze badges

Comments

pepitoenpeligro · Accepted Answer · 2022-02-01 15:58:42Z

You can define two possible states and toogle between them.

<body>
    <style>
        :root{
            --in: inset 25px 25px 60px rgba(0,0,0,.5);
            --out: inset -25px -25px 60px rgba(0,0,0,.5);
            --one: blue;
            --two: red;
        }
        .color_1{
            background-color: var(--one);
            border-radius: 200px;
            height: 300px;
            width: 300px;
            box-shadow: var(--in);
        }

        .color_2{
            background-color: var(--two);
            border-radius: 200px;
            height: 300px;
            width: 300px;
            box-shadow: var(--out);
        }
    </style>
    
<section>
<button class="color_1">

</button>

<script>
    const btn = document.querySelector('button')
    const state = '--out'
    btn.addEventListener('click', _ =>{
        states = ['color_1', 'color_2']
        actualClassName = btn.classList[0]
        btn.classList.remove(actualClassName)
        if (actualClassName === states[0]){
            btn.classList.add(states[1])
        } 
        else{
            btn.classList.add(states[0])
        }
    })
</script>

</section>
</body>

Finally, the best solution would be toogle only the state you desire, like this:

<body>
    <style>
        :root{
            --in: inset 25px 25px 60px rgba(0,0,0,.5);
            --out: inset -25px -25px 60px rgba(0,0,0,.5);
            --one: blue;
            --two: red;
        }

        .color_1{
            background-color: blue;
            border-radius: 200px;
            height: 300px;
            width: 300px;
        }

        .state1{
            box-shadow: var(--out);
        }
        
        .state2{
            box-shadow: var(--in);
        }
    </style>
    
<section>
<button class="color_1 state1">

</button>

<script>
    const btn = document.querySelector('button')
    const state = '--out'
    btn.addEventListener('click', _ =>{
        btn.classList.toggle('state2');
    });
</script>

</section>
</body>

Collectives™ on Stack Overflow

How can I change CSS variable on button click?

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest