收集几个javaScript和CSS交互的方法

1. 使用原生js获取元素的class列表

var clist = document.getElementById("test").classList 

可以获取到id为test的元素的classlist列表

clist.add("classname1");

clist.remove("classname2");

clist.toggle("classname3");

上面三个函数，执行的操作分别是添加，删除，切换某个classname属性

2. 使用querySelector()函数获取元素

通过id来选择 ： var ele = document.querySelector("#eleId");

通过标签名选择：var eles = document.querySelectorAll("p");

通过class选择：var eles = document.querySelectorAll(".txt-red");

3. 使用CSS禁用元素上的一切鼠标事件

   <style>

.disable{

pointer-events:none

};

</style>

<p class="ttt">ttt</p>

  

document.querySelectorAll(".ttt")[0].classList.add("disable");

应用disable样式会使得用javascript绑定在p.ttt元素上的任何事件都无法执行

4. 使用javascript添加CSS规则

document.styleSheet[0].insertRule("body{background-color:red}");

添加这条规则，即可将body区域的背景颜色变成red

5. 使用javascript获取元素的伪类属性

var color = window.getComputedStyle(document.querySelector(".ttt"),":before").getPropertyValue("color");
var content = window.getComputedStyle(document.querySelector(".ttt"),":before").getPropertyValue("content");

使用getComputedStyle可以获取到元素的所有的样式属性