我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
为了详细说明其他人所说的,多个CSS类组合在一个字符串中,由空格分隔。因此,如果您想对其进行硬编码,它只需如下所示:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
从那里,您可以很容易地导出添加新类所需的javascript。。。只需在元素的className属性中添加一个空格,后跟新类。知道了这一点,您还可以编写一个函数,以便以后在需要时删除类。
其他回答
这个js代码适合我
提供类名替换
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
添加仅使用
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
删除使用
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class name
希望这对忧郁的人有帮助
使用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>
纯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";
})
使用纯JavaScript将类添加到元素的另一种方法
对于添加类:
document.getElementById("div1").classList.add("classToBeAdded");
要删除类:
document.getElementById("div1").classList.remove("classToBeRemoved");
document.getElementById('some_id').className+=' someclassname'
OR:
document.getElementById('some_id').classList.add('someclassname')
当第二种方法不起作用时,第一种方法有助于添加类。在第一种方法中,不要忘记在“someclassname”前面留一个空格。
对于删除,您可以使用:
document.getElementById('some_id').classList.remove('someclassname')