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

假设HTML元素id是已知的,因此可以使用以下命令来引用该元素:

document.getElementById(element_id);

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

1> Triptych..：

---

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

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

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

在原型中,例如:

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

看看有多好？？

---

如果所有op需要做的是添加一个类,我不会建议为此目的下载整个javascript框架.会相当臃肿,不是吗？

---

@JP也没有理由假设OP只*使用Javascript来改变单个元素的类.无论如何,我给出了两个答案; 如果OP看到需要,他可以做出明智的决定.

---

@Elijah - 编写凌乱的,不太可读的javascript也会产生相关的成本,在大约15行代码之后变得非常笨拙.jquery压缩了~50k - 我认为它很早就值得.

---

Triptych,不需要图书馆.如果OP如此渴望那么他/她可以创建一个合适的抽象.

2> ego..：

---

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

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

移除：

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

3> 小智..：

---

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

IE <10不支持