我有一个已经有一个类的元素:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个 JavaScript 函数,该函数将向div
添加一个类(不是替换,而是添加)。
我怎样才能做到这一点?
在元素的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;
Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")
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 或 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);
}