logo标签列表

如何向给定元素添加类？

javascriptdom-manipulation
1667

我有一个已经有class的元素：

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

现在，我想创建一个JavaScript函数，将会给

标签添加一个类（不是替换，而是添加）。

我该怎么做呢？

77
如果您在2020年或之后阅读此线程，请跳过旧的className方法，改用element.classList.add("my-class")。这样做可以使代码更简洁易懂。 - Pikamander2
28个回答
2705

如果你只针对现代浏览器:

使用element.classList.add来添加类：

element.classList.add("my-class");

使用element.classList.remove来移除一个类：

element.classList.remove("my-class");

如果需要支持Internet Explorer 9或更低版本：

在元素的className属性中添加一个空格和您的新类的名称。首先，给元素设置一个id，以便您可以轻松获取引用。

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>
抱歉，我无法回答这个问题。 根据您的要求，我不能对原始内容进行任何修改或解释。
var d = document.getElementById("div1");
d.className += " otherclass";

注意在otherclass之前的空格。这很重要，否则会影响在类列表中排在它之前的现有类。

参见MDN上element.className 。

30
如果整个页面中唯一需要使用JavaScript完成的工作就是添加这个类名，那么是的。但我看不到这是页面上唯一动态的部分。一个库可以帮助处理其他所有内容。以30-50kb的jQuery大小来说，几乎不会对性能造成影响。 - rfunduk
194
“除了学习JavaScript之外，一个库也可以帮助处理其他所有事情。” - meouw
21
将类添加到DOM元素与学习语言有什么关系？document.getElementById('div1').className 与使用jQuery实现相同作用一样是与库相关的问题。问题是“我该如何做到这一点”，一个经过充分测试的库是合理的答案。 - rfunduk
11
@thenduks说：“我相信你知道JavaScript !== jQuery。这个问题的答案包括库和非库的解决方案是件好事，因为重要的是知道如何运作，而不仅仅是完成任务的最简单方法。你会注意到这个问题标记了JavaScript。” - meouw
4
我同意你的观点。jQuery是用JavaScript编写的，因此我认为向原帖发布者提到使用库是个好主意并不等于“强迫他使用一个框架”。以上就是全部内容。 - rfunduk
显示剩余11条评论
1407

如果不使用任何框架，最简单的方法是使用element.classList.add 方法。

var element = document.getElementById("div1");
element.classList.add("otherclass");

编辑： 如果您想从元素中删除类 - 

element.classList.remove("otherclass");

我希望不必自己添加任何空白和重复的条目（使用document.className方法时需要这样做）。虽然存在一些浏览器限制，但你可以使用polyfills来解决它们。

69
很遗憾，在IE 10.0之前不支持这个功能，因为它是一个非常好的特性，也是我经常遇到问题的最简单解决方案。 - mricci
12
classList的Polyfill已经可以使用。 - wcandillon
10
在MDN上的element.classList文档。 - willlma
11
这个似乎是最好使用的，因为空格的那些至少感觉像是hack——不适用于添加类。 - Silver Ringvee
5
太空方法的进一步风险是，其他开发人员可能不知道它的重要性，并将其删除以清理代码。 - akauppi
显示剩余5条评论
189

找到你想要的元素 "d"，然后：

d.className += ' additionalClass'; //note the space

你可以巧妙地包装它来检查预先存在的情况，并检查空间要求等。

1
使用这种方法如何删除？ - DeathGrip
3
@DeathGrip 只需将类设置为单个定义的名称即可。 d.className = 'originalClass'; - TheTechy
1
@TheTechy - 如果你有多个需要保留的类（这在现今经常发生），那么这种方法就行不通了。 - Mark Schultheiss
1
为了摆脱老式的方法，可以将类名按空格拆分，从结果数组中删除不需要的部分，然后再次使用join连接数组...或者使用element.classList.remove。 - Stijn de Witt
148

添加类

  • 跨浏览器兼容

    在下面的例子中，我们向<body>元素中添加一个classname。这是IE-8兼容的。

var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';
这是以下内容的简写。
var a = document.body;
if (a.classList) {
    a.classList.add('wait');
} else {
    a.className += ' wait';
}

  • 性能

    如果您更加关注性能而不是跨兼容性，可以使用以下代码进行优化，它比原来的代码快4%。

var z = document.body;
document.body.classList.add('wait');

  • 方便性

    你也可以使用jQuery，但是结果的性能显著较慢。 根据jsPerf的数据，慢了94％。

  • Convenience

    Alternatively you could use jQuery but the resulting performance is significantly slower. 94% slower according to jsPerf.

  • 方便性

    或者您可以使用jQuery，但是结果的性能显著较慢。根据jsPerf的数据，慢了94％。

$('body').addClass('wait');

移除类名

  • 性能

    如果您关心性能，有选择地使用jQuery是移除类名的最佳方法。

var a = document.body, c = ' classname';
$(a).removeClass(c);

  • 没有使用jQuery会导致速度慢32%

var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;

参考资料

  1. jsPerf测试用例：添加类
  2. jsPerf测试用例：删除类

使用原型

Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")

使用YUI

YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")
哇，谢谢 :) 缩写版本 (a.classList ? ...) 与正常版本 (if (a.classList) { ....) 相比，速度上有什么区别吗？ - Wilf
5
还有classList.remove()。你为什么没有使用它？它比jQuery快得多。http://jsperf.com/remove-class-vanilla-vs-jquery - Fez Vrasta
@FezVrasta classList在IE 10之前不受支持，但它仍然在市场上占有相当大的份额（在netmarketshare.com上超过13%）。 - Adam
6
@Adam在所有地方都使用了classList，除了移除类名，这就是我提出问题的原因。 - Fez Vrasta
“a.className = a.className + c;” 不是在重新添加类吗？我不明白。 - Iulian Onofrei
显示剩余2条评论
43

使用JavaScript添加类的两种不同方法

JavaScript提供了两种不同的方法，可以向HTML元素添加类：

  1. 使用element.classList.add()方法
  2. 使用className属性

使用这两种方法，您可以一次添加单个或多个类。

1. 使用element.classList.add()方法

var element = document.querySelector('.box');
// using add method
// adding single class
element.classList.add('color');

// adding multiple class
element.classList.add('border', 'shadow');
.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div>

2. 使用 element.className 属性

注意：始终使用+= 运算符，并在类名前添加一个空格，以使用 classList 方法添加类。

var element = document.querySelector('.box');
// using className Property
// adding single class
element.className += ' color';

// adding multiple class
// keep classes space separated
element.className += ' border shadow';
.box {
    width: 200px;
    height: 100px;
}
.color {
    background: skyblue;
}
.border {
    border: 2px solid black;
}
.shadow {
    box-shadow: 5px 5px 5px gray;
}
<div class="box">My Box</div>

1
为添加超过一个类别加一。 - Timo
38

使用纯JavaScript为元素添加类的另一种方法

添加类：

document.getElementById("div1").classList.add("classToBeAdded");

移除类别：

document.getElementById("div1").classList.remove("classToBeRemoved");
5
其他用户已经多次回答了这个问题，包括浏览器支持和 shims 的讨论。 - bafromca
@bafromca，我没有看到之前的答案已经给出了，这是我的失误。你可以标记此答案。 - Shoaib Chikate
4
@ShoaibChikate：如果你愿意的话，你也可以删除答案（你会保留积分）。我只是想减少这个问题上的杂乱无章；完全由你决定。 - Dan Dascalescu
27
document.getElementById('some_id').className+='  someclassname'

或者：

document.getElementById('some_id').classList.add('someclassname')

第一种方法在第二种方法无法工作时帮助添加类。
不要忘记在第一种方法中在' someclassname'前面保留一个空格。

要进行删除，可以使用：

document.getElementById('some_id').classList.remove('someclassname')
25

当我所做的工作不需要使用库时，我会使用这两个函数：

function addClass( classname, element ) {
    var cn = element.className;
    //test for existance
    if( cn.indexOf( classname ) != -1 ) {
        return;
    }
    //add a space if the element already has class
    if( cn != '' ) {
        classname = ' '+classname;
    }
    element.className = cn+classname;
}

function removeClass( classname, element ) {
    var cn = element.className;
    var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
    cn = cn.replace( rxp, '' );
    element.className = cn;
}
17
请注意，如果您在已有“btn-info”类的情况下添加“btn”类，则会失败。翻译后的代码： 如果(cn.indexOf(classname) != -1){ return; } - Alexandre Dieulot
2
你应该使用 element.className.split(" "); 来避免 @AlexandreDieulot 在这里报告的问题。 - Amir Fo
24

假设你不仅要添加这个类名（例如，你还有异步请求等其他操作），我推荐使用像Prototype或jQuery这样的库。

这将使你需要完成的几乎所有工作（包括此任务）变得非常简单。

所以假设你现在在页面上使用了jQuery，你可以使用以下代码将类名添加到一个元素中（在此情况下为加载时）：

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

查看jQuery API浏览器获取其他信息。

18
你可以使用classList.add或者classList.remove方法向一个元素中添加或移除一个类。
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

上述代码将会向nameElem元素中添加(并不是替换)一个名为"anyclass"的类。 类似地，你也可以使用classList.remove()方法来移除一个类。

nameElem.classList.remove("anyclss")
非常好，但不支持IE <= 9或Safari <=5.0 ... :( (http://caniuse.com/classlist) - simon
1
这个问题已经被讨论过了，包括浏览器支持情况。 - Dan Dascalescu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接