如何向给定元素添加类？

现在我想创建一个Javascript函数,它将一个类添加到div(不替换,但添加).

我怎样才能做到这一点？

将空格加上新类的名称添加到className元素的属性中.首先,放置id元素,以便您可以轻松获得参考.

然后

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

另请参见MDN上的element.className.

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

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

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

element.classList.remove("otherclass");

我不希望自己添加任何空白空间和重复的条目处理(使用该document.className方法时需要).有一些浏览器限制,但您可以使用polyfills解决它们.

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

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

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

添加课程

交叉兼容

在以下示例中,我们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;

参考

jsPerf测试用例:添加一个类

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

使用纯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;
}

假设你做的不仅仅是添加这个类(例如,你有异步请求等等),我建议使用像Prototype或jQuery这样的库.

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

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

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

查看jQuery API浏览器以获取其他内容.

您可以使用classList.add OR 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);
}