我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
可以使用classList.add或classList.remove方法从元素中添加/删除类。
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")
上述代码将向nameElem添加(而不是替换)一个类“anyclass”。类似地,可以使用classList.remove()方法删除类。
nameElem.classList.remove("anyclss")
其他回答
在我的例子中,我在DOM中有多个称为主包装器的类,但我只想影响父主包装器。使用:第一选择器(https://api.jquery.com/first-selector/),我可以选择第一个匹配的DOM元素。这是我的解决方案:
$(document).ready( function() {
$('.main-wrapper:first').addClass('homepage-redesign');
$('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );
我还对DOM中特定div的第二个孩子做了同样的事情,正如您在代码中看到的那样,我使用了$('#deals index>div:eq(0)>div:eq(1)').addClass('doubleheadrredesign');。
注意:如您所见,我使用了jQuery。
找到你想要的目标元素“d”,然后:
d.className += ' additionalClass'; //note the space
您可以用更聪明的方式来包装它,以检查预存在,检查空间需求等。。
假设您所做的不仅仅是添加这个类(例如,您还有异步请求等),我建议使用Prototype或jQuery这样的库。
这将使你需要做的所有事情(包括这个)变得非常简单。
假设您现在在页面上有jQuery,您可以使用如下代码向元素添加类名(在本例中是加载时):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
查看jQueryAPI浏览器以了解其他内容。
要向元素添加其他类,请执行以下操作:
要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:
document.getElementById("MyElement").className += " MyClass";
要更改元素的所有类,请执行以下操作:
要用一个或多个新类替换所有现有类,请设置className属性:
document.getElementById("MyElement").className = "MyClass";
(可以使用空格分隔的列表来应用多个类。)
使用纯JavaScript将类添加到元素的另一种方法
对于添加类:
document.getElementById("div1").classList.add("classToBeAdded");
要删除类:
document.getElementById("div1").classList.remove("classToBeRemoved");