我有一个元素已经有一个类:

<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>

其他回答

如果您不想使用jQuery并希望支持较旧的浏览器:

function addClass(elem, clazz) {
    if (!elemHasClass(elem, clazz)) {
        elem.className += " " + clazz;
    }
}

function elemHasClass(elem, clazz) {
    return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}

首先,给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>

您可以使用类似于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>

对于使用Lodash并希望更新className字符串的用户:

// get element reference
var elem = document.getElementById('myElement');

// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()

// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()

找到你想要的目标元素“d”,然后:

d.className += ' additionalClass'; //note the space

您可以用更聪明的方式来包装它,以检查预存在,检查空间需求等。。