要以简单的方式添加、删除或检查元素类，请执行以下操作：

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

当我正在做的工作不需要使用库时，我使用以下两个函数：

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}

如果您只针对现代浏览器：

使用element.classList.add添加类：

element.classList.add("my-class");

和element.classList.remove删除类：

element.classList.remove("my-class");

如果您需要支持Internet Explorer 9或更低版本：

在元素的className属性中添加一个空格加上新类的名称。首先，在元素上放置一个id，这样就可以轻松地获得引用。

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

然后

var d = document.getElementById("div1");
d.className += " otherclass";

注意其他类之前的空格。包含空间很重要，否则它会损害类列表中前面的现有类。

另请参见MDN上的element.className。

对于使用Lodash并希望更新className字符串的用户：

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

使用JavaScript添加类的两种不同方法

JavaScript提供了两种向HTML元素添加类的不同方式：

使用element.classList.add（）方法使用className属性

使用这两种方法，您可以同时添加一个或多个类。

1.使用element.classList.add（）方法

var element=document.querySelector（'.box'）；//使用加法//添加单个类element.classList.add（'color'）；//添加多个类element.classList.add（'订单'，'阴影'）；.box格式{宽度：200px；高度：100px；}.颜色{背景：天蓝；}.边框{边框：2px实心黑色；}.阴影{盒子阴影：5px 5px 5px灰色；}<div class=“box”>我的盒子</div>

2.使用element.className属性

注意：始终使用+=运算符，并在类名前添加一个空格，以使用classList方法添加类。

var element=document.querySelector（'.box'）；//使用className属性//添加单个类element.className+=“颜色”；//添加多个类element.className+='边框阴影'；.box格式{宽度：200px；高度：100px；}.颜色{背景：天蓝；}.边框{边框：2px实心黑色；}.阴影{盒子阴影：5px 5px 5px灰色；}<div class=“box”>我的盒子</div>

这个js代码适合我

提供类名替换

var DDCdiv = hEle.getElementBy.....

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta[i] = 'hidden';
        break;// quit for loop
    }
    else if (Ta[i] == 'hidden'){
        Ta[i] = 'visible';
    break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

添加仅使用

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

删除使用

var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array

for (var i=0; i< Ta.length;i++)
{
    if (Ta[i] == 'visible'){
        Ta.splice( i, 1 );
        break;// quit for loop
    }
}
DDCdiv.setAttribute('class',Ta.join(' ') );  // Join array with space and set class name

希望这对忧郁的人有帮助