通过js实现css样式的动态切换(React,Vue均适用)

 有一些需求，如动态切换界面主题，就需要通过js去控制css。

对应的实现方案也有很多，如Less中的modifyVar,这里推荐一种兼容性比较好的做法，使用浏览器原生支持的——CSS变量。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

首先在根css文件头部(如index.css或App.css之类的)声明变量以及默认值，以双短横线--开头。

:root{
    --show-bullet: visible;
};

其中show-bullet是我自定义的变量，用于控制弹幕是否展示。:root代表这个是全局的变量，所以你可以在任何地方访问到这个变量，

如子组件的css中。

比如我在自定义弹幕组件中:

.bullet {
    visibility: var(--show-bullet);
}

var代表访问变量。因此默认情况下弹幕是可见的。

那么我如果想要做一个按钮的点击事件关闭弹幕:

只需要(以下为js代码)：

document.documentElement.style.setProperty(‘--show-bullet‘,‘hidden‘);

弹幕就会关闭显示了。其中注意在定义css变量时，无需加引号，而在通过js修改时一定要加引号，确保第二个参数为字符串。

通过js实现css样式的动态切换(React,Vue均适用)

原文：https://www.cnblogs.com/flamestudio/p/12767452.html