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

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

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

我该怎么做?


当前回答

您可以使用类似于jQuery的现代方法

如果您只需要更改一个元素,即JS将在DOM中找到的第一个元素,则可以使用以下方法:

document.querySelector('.someclass').className+=“red”;.红色{颜色:红色;}<div class=“someclass”><p>此方法将仅向DOM中的第一个元素添加类“red”</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div>

请记住在类名前留一个空格。

如果您有多个要添加新类的类,可以这样使用

document.querySelectorAll('.someclass').forEach(函数(元素){element.className+=“红色”;});.红色{颜色:红色;}<div class=“someclass”><p>此方法将向DOM中具有“someclass”类的所有元素添加类“red”</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div><div class=“someclass”><p>洛雷姆ipsum</p></div>

其他回答

document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

当第二种方法不起作用时,第一种方法有助于添加类。在第一种方法中,不要忘记在“someclassname”前面留一个空格。

对于删除,您可以使用:

document.getElementById('some_id').classList.remove('someclassname')

要向元素添加其他类,请执行以下操作:

要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:

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

要更改元素的所有类,请执行以下操作:

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

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

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

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

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

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

我也认为最快的方法是使用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})}

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

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

假设您现在在页面上有jQuery,您可以使用如下代码向元素添加类名(在本例中是加载时):

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

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