我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
在没有任何框架的情况下,最简单的方法是使用element.classList.add方法。
var element = document.getElementById("div1");
element.classList.add("otherclass");
编辑:如果要从元素中删除类-
element.classList.remove("otherclass");
我宁愿不添加任何空格和重复条目处理(使用document.className方法时需要这样做)。浏览器存在一些限制,但可以使用polyfills解决这些限制。
其他回答
我认为最好使用纯JavaScript,它可以在浏览器的DOM上运行。
这里是使用它的函数方法。我使用过ES6,但可以随意使用ES5和函数表达式或函数定义,无论哪种都适合您的JavaScript StyleGuide。
'使用严格'const oldAdd=(元素,className)=>{let classes=element.className.split(“”)if(classes.indexOf(className)<0){classs.push(className)}element.className=classes.join(“”)}const oldRemove=(元素,className)=>{let classes=element.className.split(“”)const idx=classes.indexOf(className)如果(idx>-1){类.拼接(idx,1)}element.className=classes.join(“”)}const addClass=(元素,className)=>{if(element.classList){element.classList.add(className)}其他{oldAdd(元素,className)}}const removeClass=(元素,className)=>{if(element.classList){element.classList.remove(className)}其他{oldRemove(元素,className)}}
您可以使用类似于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>
如果您只针对现代浏览器:
使用element.classList.add添加类:
element.classList.add("my-class");
和element.classList.remove删除类:
element.classList.remove("my-class");
如果您需要支持Internet Explorer 9或更低版本:
在元素的className属性中添加一个空格加上新类的名称。首先,在元素上放置一个id,这样就可以轻松地获得引用。
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>
然后
var d = document.getElementById("div1");
d.className += " otherclass";
注意其他类之前的空格。包含空间很重要,否则它会损害类列表中前面的现有类。
另请参见MDN上的element.className。
假设您所做的不仅仅是添加这个类(例如,您还有异步请求等),我建议使用Prototype或jQuery这样的库。
这将使你需要做的所有事情(包括这个)变得非常简单。
假设您现在在页面上有jQuery,您可以使用如下代码向元素添加类名(在本例中是加载时):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );
查看jQueryAPI浏览器以了解其他内容。
找到你想要的目标元素“d”,然后:
d.className += ' additionalClass'; //note the space
您可以用更聪明的方式来包装它,以检查预存在,检查空间需求等。。