有一些需求，如动态切换界面主题，就需要通过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修改时一定要加引号，确保第二个参数为字符串。