我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
我有一个元素已经有一个类:
<div class="someclass">
<img ... id="image1" name="image1" />
</div>
现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。
我该怎么做?
当前回答
使用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>
其他回答
这可能对WordPress开发人员等有帮助。
document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');
当我正在做的工作不需要使用库时,我使用以下两个函数:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}
为了详细说明其他人所说的,多个CSS类组合在一个字符串中,由空格分隔。因此,如果您想对其进行硬编码,它只需如下所示:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>
从那里,您可以很容易地导出添加新类所需的javascript。。。只需在元素的className属性中添加一个空格,后跟新类。知道了这一点,您还可以编写一个函数,以便以后在需要时删除类。
document.getElementById('some_id').className+=' someclassname'
OR:
document.getElementById('some_id').classList.add('someclassname')
当第二种方法不起作用时,第一种方法有助于添加类。在第一种方法中,不要忘记在“someclassname”前面留一个空格。
对于删除,您可以使用:
document.getElementById('some_id').classList.remove('someclassname')
您可以使用类似于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>