原生js怎么添加一个或多个类名？

JavaScript019

原生js怎么添加一个或多个类名？,第1张

添加 单个 class:

添加多个类:

移除一个类:

移除多个类:

检查是否含有某个类

因为`.manage2`样式是在事件中添加到#manage元素的，第二段代码执行时该元素尚未被赋予.manage2样式， 所以获取不到这个元素也没添加有效的事件。

看你这段代码， .manage1、.manage2应该都是id为manage的元素，

首先能用ID获取就不要用样式获取， 因为ID获取元素的效率最快。

其次， 同一元素多次被使用时， 用变量暂存，

代码更改如下， 如果不对， 请上传相应的HTML：

var box = document.getElementById('box'),

    boxClassList = box.classList

    manage = document.getElementById('manage'),

    manageClassList = manage.classList

manage.onclick = function(){

    manageClassList.remove('manage1')

    manageClassList.add('manage2')

    boxClassList.add('addr-add')

    manage.onclick = function(){

        boxClassList.remove('addr-add')

        boxClassList.add('addr-delete')

    }

}

JavaScript动态建立或增加CSS样式表，参考如下：

1、简单的方法：

document.createStyleSheet().cssText = '标签{color:red' +  

    // 这个注释只在当前JS中帮助理解，并不会写入CSS中  

    'width:300pxheight:150px}' +  

    '.类名{……}' +  

    '#ID们{……}'

2、比较完美的方法，防止重复添加，通过添加样式表ID并对其判断来实现：

if (!document.styleSheets['要建立的样式表ID如theforever']) { //先检查要建立的样式表ID是否存在，防止重复添加  

 var ss = document.createStyleSheet()  

 ss.owningElement.id = '要建立的样式表ID如theforever'  

 ss.cssText = '标签{display:inline-blockoverflow:hidden' +  

  // 这个注释只在当前JS中帮助理解，并不会写入CSS中  

  'text-align:leftwidth:300pxheight:150px}' +  

  '.类名{……}' +  

  '#ID们{……}'  

   

}