我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
大多数人在getElementById上使用.classList.add,但我想在getElementByClassName上使用它。为此,我使用了如下的forEach:
document.getElementsByClassName(“类名”).forEach(element=>element.classList.add(“new class”));
但它不起作用,因为我发现getElementsByClassName返回的是HTML集合,而不是数组。为了处理这个问题,我使用以下代码将其转换为数组:
[…document.getElementsByClassName(“类名”)].forEach(element=>element.classList.add(“new class”));
其他回答
首先,给div一个id。然后,调用函数appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>
在没有任何框架的情况下,最简单的方法是使用element.classList.add方法。
var element = document.getElementById("div1");
element.classList.add("otherclass");
编辑:如果要从元素中删除类-
element.classList.remove("otherclass");
我宁愿不添加任何空格和重复条目处理(使用document.className方法时需要这样做)。浏览器存在一些限制,但可以使用polyfills解决这些限制。
使用JavaScript添加类的两种不同方法
JavaScript提供了两种向HTML元素添加类的不同方式:
使用element.classList.add()方法使用className属性
使用这两种方法,您可以同时添加一个或多个类。
1.使用element.classList.add()方法
var element=document.querySelector('.box');//使用加法//添加单个类element.classList.add('color');//添加多个类element.classList.add('订单','阴影');.box格式{宽度:200px;高度:100px;}.颜色{背景:天蓝;}.边框{边框:2px实心黑色;}.阴影{盒子阴影:5px 5px 5px灰色;}<div class=“box”>我的盒子</div>
2.使用element.className属性
注意:始终使用+=运算符,并在类名前添加一个空格,以使用classList方法添加类。
var element=document.querySelector('.box');//使用className属性//添加单个类element.className+=“颜色”;//添加多个类element.className+='边框阴影';.box格式{宽度:200px;高度:100px;}.颜色{背景:天蓝;}.边框{边框:2px实心黑色;}.阴影{盒子阴影:5px 5px 5px灰色;}<div class=“box”>我的盒子</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。
在YUI中,如果包含yuidom,则可以使用
YAHOO.util.Dom.addClass('div1','className');
HTH