如何通过javascript将一个CSS类添加到一个元素?

假设一个HTML元素的id是已知的,所以元素可以被引用:

 document.getElementById(element_id); 

是否存在可用于将CSS类附加到该元素的原生JavaScript函数?

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

瞧。 这将几乎每一个浏览器的工作。 前导空间很重要,因为className属性将CSS类视为一个单独的string,它应该与HTML元素上的class属性(其中多个类必须用空格分隔)匹配。

顺便说一句,你会更好地使用像原型或jQuery的Javascript库,它有方法来做到这一点,以及function,可以首先检查一个元素是否已经有一个类分配。

在原型中,例如:

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

看看有多好?

classList是访问元素的类列表的一种方便的替代方法。请参阅http://developer.mozilla.org/en-US/docs/Web/API/Element.classList

IE不支持<10

当一个元素已经定义了一个类名的时候,它对元素的影响就和它在类名string中的位置有关系。 如果发生冲突,以后的课程将覆盖较早的课程。

如果已经存在,那么向类中添加一个类应该将类名称移动到列表的最前端。

 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(' '); } 

你应该能够设置元素的className属性。 你可以做一个+ =来追加它。

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

这将添加一个类或MULTIPLE类:

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