css文件使用js变量

CSS文件可以使用JavaScript变量来实现更灵活的样式控制。在Web开发中，使用CSS是很常见的，但是有时候我们需要动态地改变样式，这时候CSS文件就显得不够灵活了，这时候我们可以使用JavaScript变量来动态地控制CSS样式。

style>
:root {
    --color-primary: red;
    --color-secondary: green;
}
.btn {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}
    /style>
    

在上面的CSS代码中，:root选择器定义了两个变量Color-primary和Color-secondary，这些变量可以在整个文档中使用。我们可以在JavaScript中改变这些变量，这样可以动态地改变按钮的样式。

script>
    const btn = document.querySelector('.btn');
    btn.style.setProperty('--color-primary', 'blue');
    btn.style.setProperty('--color-secondary', 'yellow');
    /script>
    

在上面的JavaScript代码中，我们通过querySelector选择器选中了一个class为btn的元素。接着，我们使用style.setProperty()函数来改变CSS变量的值。在这个例子中，我们动态地改变了按钮的颜色。

总之，使用JavaScript变量来控制CSS样式可以让我们动态地改变页面的样式，从而实现更丰富的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！