题 如何向给定元素添加类?


我有一个已经有类的元素:

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

现在我想创建一个Javascript函数,它将添加一个类 div (不是替换,而是添加)。

我怎样才能做到这一点?


923
2018-02-03 13:54


起源




答案:


添加一个空格加上新类的名称 className 元素的属性。首先,放一个 id 在元素上,您可以轻松获得参考。

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

然后

var d = document.getElementById("div1");
d.className += " otherclass";

也可以看看 MDN上的element.className


1643
2018-02-03 13:58



如果需要使用JavaScript完成整个页面的唯一工作是添加此类名称,那么是。但我不认为这是该页面唯一的动态部分。图书馆也将帮助其他一切。在30-50kb jQuery几乎不值得讨论。 - rfunduk
“除了学习JavaScript之外,”图书馆也将帮助其他一切“ - meouw
向DOM元素添加类与学习语言有什么关系? document.getElementById('div1')。className与库相关的问题一样多,使用jQuery也是如此。问题是“我怎么能这样做”,经过彻底测试的图书馆是明智的答案。 - rfunduk
@thenduks:我相信你知道JavaScript!== jQuery。这个问题的答案包括库和非库解决方案是一件好事,因为知道它很重要 怎么样 事情不仅仅是完成它们的最简单方法。你会注意到这个问题被标记为javascript - meouw
添加到 以实玛利的答案,你不必这样做 className = className +,你可以这样做 className +=。 - Cilan


没有任何框架的最简单的方法是使用 element.classList.add 方法。

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

编辑: 如果你想从一个元素中删除类 -

element.classList.remove("otherclass");

我更喜欢不必添加任何空白空间和自己重复的条目处理(这在使用时是必需的 document.className 方法)。有一些 浏览器限制,但你可以使用它来解决它们 polyfills


1041
2017-12-31 12:12



令人遗憾的是,在IE 10.0之前不支持这一点,因为它是一个出色的功能,也是我经常遇到的问题的最简单的解决方案。 - mricci
可以使用classList的polyfill。 - wcandillon
element.classList docs 在MDN上。 - willlma
这个似乎是最好用的,因为有空间的人至少感觉像黑客 - 没有添加类... - Silver Ringvee
@SilverRingvee太空方法的另一个风险是,其他一些开发人员可能不知道它至关重要,并将其删除以便清理。 - akauppi


找到你想要的目标元素“d”然后:

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

你可以用更聪明的方式包装它来检查预先存在,并检查空间要求等。


171
2018-02-03 14:01



并删除使用此方法? - DeathGrip
@DeathGrip只是将类设置回单个定义的名称d.className ='originalClass'; - TheTechy


添加课程

  • 交叉兼容

    在以下示例中,我们添加了一个 classname 到了 <body> 元件。这与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%

    $('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测试用例:删除一个类

使用Prototype

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")

116
2017-12-22 23:29



哇谢谢:)请问速记版(a.classList ? ...)与正常速度相比有任何速度差异(if (a.classList) { ....)? - Wilf
还有 classList.remove()。你为什么不用它?它比jQuery快得多 jsperf.com/remove-class-vanilla-vs-jquery - Fez Vrasta
IE 10之前不支持@FezVrasta classList,它仍然拥有不错的市场份额(在netmarketshare.com上为+ 13%)。 - Adam
@Adam他用过 classList 除了删除类之外的所有内容,这就是我要问的原因。 - Fez Vrasta
@FezVrasta Under 交叉兼容 我确实使用过.add(),但只是在检查它是否可用之后,hense 交叉兼容。为了删除我没有重复自己,所以我没有包括尽可能多的选项。 - davidcondrey


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

添加课程:

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

删除类:

document.getElementById("div1").classList.remove("classToBeRemoved");

32
2017-09-23 11:15



其他用户已多次回答这个问题,包括浏览器支持和填充程序的讨论。 - bafromca
@bafromca我没有看到先前的答案和我的错误。你可以标记这个答案 - Shoaib Chikate
@ShoaibChikate:如果你愿意,你也可以删除答案(你会保留积分)。试着减少这个问题的混乱;完全取决于你。 - Dan Dascalescu


假设你做的不仅仅是添加这一个类(例如,你有异步请求等等),我建议像这样的库 原型 要么 jQuery的

这将使你需要做的所有事情(包括这个)变得非常简单。

所以假设你现在已经在你的页面上有了jQuery,你可以使用这样的代码为一个元素添加一个类名(在这种情况下加载时):

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

看看 jQuery API浏览器 其他的东西。


20
2018-02-03 14:00





当我正在做的工作不保证使用库时,我使用这两个函数:

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;
}

20
2018-02-03 14:40



if( cn.indexOf( classname ) != -1 ) { return; }  请注意,如果添加类“btn-info”的类“btn”已经在这里,则会失败。 - Alexandre Dieulot