JS 修改 CSS

1.覆盖原来的class类名和样式

var htm = document.getElementById('title').setAttribute('class', 'title1');
var dom = document.getElementByClassName('title')[0].setAttribute('class', 'title1');

2.追加样式，不覆盖原来的class类名和样式

var htm = document.getElementById('title').classList.add('title1');
var htm1 = document.getElementById('title').classlList.add('title1', 'title2', 'title3');
var dom = document.getElementByClassName('title')[0].add('title1');

3.注意

• 1.所有的都必须要在DOM获取到的前提下用
• 2.再用类名获取DOM的时候会报错： 常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function
  • 原因：document.getElementsByClassName(...)捕捉到的是该类名元素的数组
  • 正确的访问方式应该是：

    document.getElementsByClassName(...)[0].addEventListener...
    

    使用遍历为每个class添加监听：

    var classObj = document.getElementsByClassName(...);
    for(i=0;i<classObj.length;i++){
    classObj[i].addEventListener...
    }
    

  所以在后面加上数组的下标确定是该类名的哪一个类名下追加或者替换

4.移出类名

• 移除单个

dom.classList.remove("className1");

• 移除多个

dom.classList.remove("className1", "className2", "className3", ....., "classNameN");

5.检查类名

dom.classList.contains('className'); //return true or false