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

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

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

我该怎么做?


当前回答

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

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

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

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

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

其他回答

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

OR:

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

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

对于删除,您可以使用:

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

纯JS示例。在第一个示例中,我们获取元素的id并添加例如2个类。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})

在第二个示例中,我们获取元素的类名并再添加1。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})

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

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

编辑:如果要从元素中删除类-

element.classList.remove("otherclass");

我宁愿不添加任何空格和重复条目处理(使用document.className方法时需要这样做)。浏览器存在一些限制,但可以使用polyfills解决这些限制。

您可以使用类似于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>

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

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

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