如何将类添加到给定的元素?

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

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

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

我怎样才能做到这一点?

答案

如果需要支持 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之前的otherclass 。重要的是要包含空格,否则会损害类列表中之前的现有类。

另请参见MDN 上的 element.className

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

使用element.classList.add添加一个类:

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

然后element.classList.remove删除一个类:

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

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

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

编辑:并且,如果您想从元素中删除类 -

element.classList.remove("otherclass");

我宁愿不必自己添加任何空白空间和重复条目(使用document.className方法时需要)。 浏览器有一些限制 ,但是您可以使用polyfill来解决它们。

根据需要找到目标元素 “d”,然后:

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

您可以用更聪明的方法包装它,以检查是否存在,并检查空间需求等。

新增课程

  • 交叉兼容

    在下面的示例中,我们向<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%

    $('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")

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

对于添加类:

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

对于删除类:

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

当我所做的工作不能保证使用库时,我将使用以下两个功能:

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

假设您要做的不仅仅是添加一个类(例如,您还有异步请求等),我建议您使用PrototypejQuery 之类的库。

这将使您几乎需要做的一切(包括此操作)变得非常简单。

因此,假设您现在在页面上有了 jQuery,则可以使用如下代码向元素添加类名(在这种情况下为加载):

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

查看jQuery API 浏览器以了解其他内容。

您可以使用 classList.add 或 classList.remove 方法从元素中添加 / 删除类。

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

上面的代码将为 nameElem 添加(而不是替换)一个类 “anyclass”。同样,您可以使用 classList.remove()方法删除一个类。

nameElem.classList.remove("anyclss")

要将附加类添加到元素:

要将类添加到元素中而不删除 / 影响现有值,请添加空格和新的类名,如下所示:

document.getElementById("MyElement").className += " MyClass";

更改元素的所有类:

要将所有现有类替换为一个或多个新类,请设置 className 属性:

document.getElementById("MyElement").className = "MyClass";

(您可以使用空格分隔的列表来应用多个类。)

如果您不想使用 jQuery 并希望支持较旧的浏览器:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}