Question

假设HTML元素的id已知，因此可以使用以下命令引用该元素：

document.getElementById(element_id);

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

Answer 1

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

瞧。这几乎适用于所有浏览器。前导空间很重要，因为className属性将css类视为单个字符串，它应该与HTML元素上的class属性匹配（其中多个类必须用空格分隔）。

顺便说一句，你最好使用像prototype或jQuery这样的Javascript库，它们有方法可以执行此操作，以及可以首先检查元素是否已经存在的函数分配的课程。

在原型中，例如：

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

看看它有多好？！

Answer 2

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

IE不支持＆lt; 10

Answer 3

使用元素的classList属性添加类：

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

正在移除：

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

Answer 4

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

向元素添加类应该将类名移动到列表的尖端（如果已存在）。

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

Answer 5

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

Answer 6

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"

Answer 7

您可以使用setAttribute。

实施例：添加一个类：

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

对于多个班级：

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

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

7 个答案: