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

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

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

我该怎么做?


当前回答

最短的

image1.parentNode.className+=' box';

image1.parentNode.className+=“box”;.box{width:100px;height:100px,background:red;}<div class=“someclass”><img。。。id=“images1”name=“image1”/></div>

其他回答

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

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

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

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

对于添加类:

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

要删除类:

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

我也认为最快的方法是使用Element.prototype.classList,如es5:document.querySelector(“.my.superclass”).classList.add('new-class')但是在ie8中没有Element.prototype.classList这样的东西,无论如何,您可以用以下代码段来填充它(可以自由编辑和改进它):

if(Element.prototype.classList==void 0){函数DOMTokenList(类,自身){typeof classes==“string”&&(classes=classes.split(“”))while(此长度){Array.protocol.pop.apply(this);}数组.原型.推送.应用(this,类);这一点__self__=这个__自我__||自我}DOMTokenList.prototype.item=函数(索引){返回此[索引];}DOMTokenList.prototype.contains=函数(myClass){对于(var i=this.length-1;i>=0;i-){如果(this[i]==myClass){返回true;}}return false}DOMTokenList.prototype.add=函数(newClass){if(this.contains(newClass)){回来}这一点__self__.className+=(this.__self__.calassName?“”:“”)+newClass;DOMTokenList.call(this,this.__self__.className)}DOMTokenList.prototype.remove=函数(旧类){if(!this.contains(newClass)){回来}this[this.indexOf(oldClass)]=未定义这一点__self__.className=this.join('').replace(/+/,'')DOMTokenList.call(this,this.__self__.className)}DOMTokenList.prototype.toggle=函数(aClass){this[this.contains(aClass)?'remove':'add'](aClass)返回this。contains(aClass);}DOMTokenList.prototype.replace=函数(旧类,新类){this.contains(oldClass)&&this.remove(oldClass)&&this.add(newClass)}Object.defineProperty(Element.prototype,'classList'{获取:函数(){返回新的DOMTokenList(this.className,this);},可枚举:false})}

对于使用Lodash并希望更新className字符串的用户:

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

添加类

交叉兼容在下面的示例中,我们向<body>元素添加类名。这与IE-8兼容。var a=文档正文;a.classList?a.classList.add('classname'):a.classname+='classname';这是以下内容的简写。。var a=文档正文;if(a.classList){a.classList.add('wait');}其他{a.className+=“等待”;}


表演如果您更关心性能而不是交叉兼容性,可以将其缩短为以下值,即速度提高4%。var z=文档正文;document.body.classList.add('wait');


方便或者,您可以使用jQuery,但结果的性能会明显降低。根据jsPerf,速度降低了94%$('body').addClass('wait');



正在删除类

表演如果您关注性能,那么有选择地使用jQuery是删除类的最佳方法var a=document.body,c=“类名”;$(a).removeClass(c);


没有jQuery,速度会慢32%var a=document.body,c=“类名”;a.className=a.className.replace(c,“”);a.className=a.className+c;


工具书类

jsPerf测试用例:添加类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")