js修改css选择器的样式作用到全局

目前总结有四个方法；

1.新建style标签，写上样式 覆盖掉之前的样式；

2.css中使用var变量，然后通过 CSSStyleDeclaration.setProperty()设置变量的值；注意css中变量的作用域 只能是当前元素及子元素；

　　例如：

index.css

　　　

#box{
   color: var(--color);
}

index.js

document.getElementById("box").style.setProperty("--color","red");

3.css中 attr（）；

兼容性不好。

CSS函数attr()是用来获取被选中元素的属性值，并且在样式文件中使用。它也可以用在伪类元素里，在伪类元素里使用，它得到的是伪元素的原始元素的值。

attr()函数可以和任何CSS属性一起使用，但是除了content外，其余都还是试验性的（简单说就是不稳定，浏览器不一定支持）。

例如 ：

index.css

#box{
  color:attr(data-color)  
}

index.js

document.getElementById("box").dataset.color = "red";

4.通过cssStyleSheet修改样式表；不太灵活，不同环境获取样式表的方式不同，可能开发环境是style标签，生产环境就是 link标签了。

tip：方法2,3,的兼容性还需查询caniuse，方法4不太灵活

参考文章：css中的var的作用域；

var 官方文档；

CSSStyleSheet参考;

var 参考文章