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

Question

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

document.getElementById(element_id);

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

Answer 1

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框架.会相当臃肿,不是吗？ (9认同)
@JP也没有理由假设OP只*使用Javascript来改变单个元素的类.无论如何,我给出了两个答案; 如果OP看到需要,他可以做出明智的决定. (7认同)
@Elijah - 编写凌乱的,不太可读的javascript也会产生相关的成本,在大约15行代码之后变得非常笨拙.jquery压缩了~50k - 我认为它很早就值得. (2认同)
Triptych,不需要图书馆.如果OP如此渴望那么他/她可以创建一个合适的抽象. (2认同)

Answer 2

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

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

移除：

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

Answer 3

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

IE <10不支持