如何通过javascript将css类附加到元素？

假设一个HTML元素的

id

已知，那么可以使用以下方法引用该元素：

document.getElementById(element_id);

是否存在可用于将CSS类附加到该元素的本机Javascript函数

var element = document.getElementById(element_id);
element.className += " " + newClassName;

瞧。这将适用于几乎所有的浏览器。前导空格很重要，因为

className

属性将css类视为单个字符串，应该与HTML元素上的

class

属性相匹配（其中多个类必须用空格分隔）

顺便说一句，您最好使用像or这样的Javascript库，该库具有执行此操作的方法，以及可以首先检查元素是否已分配了类的函数

例如，在原型中：

// Prototype automatically checks that the element doesn't already have the class
$(element_id).addClassName(newClassName);

---

看那有多好

您应该能够设置元素的className属性。您可以使用+=来附加它。

当元素已经定义了类名时，它对元素的影响与它在类名字符串中的位置有关。 如果有冲突，后面的类将覆盖前面的类

如果类名已经存在，向元素添加类应该将类名移动到列表的最前端

document.addClass= function(el, css){
    var tem, C= el.className.split(/\s+/), A=[];    
    while(C.length){
        tem= C.shift();
        if(tem && tem!= css) A[A.length]= tem;
    }
    A[A.length]= css;
    return el.className= A.join(' ');   
}

---

classList是访问元素的类列表的一种方便的替代方法。。看

IE<10中不支持

addClass=(selector,classes)=>document.querySelector(selector).classList(...classes.split(' '));

这将添加一个或多个类：

addClass('#myDiv','back-red'); // => Add "back-red" class to <div id="myDiv"/>
addClass('#myDiv','fa fa-car') //=>Add two classes to "div"

addClass（'myDiv'，'back-red'）；//=>将“back red”类添加到
addClass（“#myDiv”，“fa-fa-car”）/>将两个类添加到“div”

您可以使用

setAttribute

例如： 要添加一个类，请执行以下操作：

 document.getElementById('main').setAttribute("class","classOne"); 

对于多个类：

 document.getElementById('main').setAttribute("class", "classOne classTwo"); 

---

使用元素的属性添加类：

element.classList.add('my-class-name');

删除：

element.classList.remove('my-class-name');

---

如果op只需要添加一个类，我不建议为此下载整个javascript框架。是不是太臃肿了？@Elijah-编写凌乱、可读性差的javascript也会带来成本，大约15行代码之后，javascript变得相当笨拙。jquery是~50k压缩的-我认为在很早的时候它就值得了。@Triptych。一致同意可读性。如果你使用谷歌托管版本的库，它很可能已经被缓存在用户的机器上，甚至可能节省时间。如果OP愿意，那么他/她可以创建一个合适的抽象。@J-P也没有理由认为OP只是使用Javascript来更改单个元素的类。无论如何，我给出了两个答案；如果OP看到需要，他可以做出明智的决定。

setAttribute

不附加类-它设置类列表，因此任何现有类都将丢失此线程上的最佳答案