如何在单击按钮时更改 CSS 变量？

Question

如何让CSS在点击按钮时将按钮的框阴影从 var('--out') 更改为 var('--in')，当你再次点击它时它'会改回 --out?

我试过了，但每当我点击按钮时，它只会删除整个阴影。

HTML + JS:

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

</button>

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

</section>
</body>

CSS:

: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);
}

Answer 1

您需要使用 :root 选择器和 document.querySelector 而不是 document.documentElement 来更改 css 变量。您还需要更改 css 以使用新的 --state 变量，您可以使用 JS 代码在 --in 和 --out 之间切换。在更改变量之前，您还需要使用 getProperty 获取 --in 或 --out css 变量的值。脚本标记中的以下代码应该可以解决您的问题：

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

并且还在您的样式标签中使用以下内容：

: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);
}

Answer 2

您正试图用另一个变量更改一个变量的值。

您将需要 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>

但理想的方法是不更改根变量的值。如果您在其他地方需要该值怎么办。您可以在您的元素上为此设置单独的类，您可以根据条件 add/toggle。

: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>

Answer 3

好的，这就是我为您准备的！

它正在删除 --out 值并将其设置为 --in，看起来像这样 (--out: --in;)。这就是我们看到 box-shadow 被删除的原因
此代码：document.documentElement - 未针对您的按钮背景 - 将其更改为：btn.style.boxShadow

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

Answer 4

您可以定义两种可能的状态并在它们之间切换。

<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>

最后，最好的解决办法是只切换你想要的状态，就像这样：

<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>

如何在单击按钮时更改 CSS 变量？

How can I change CSS variable on button click?

javascript

html

css

variables

styles