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

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

现在,我想创建一个JavaScript函数,它将向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";
})

其他回答

大多数人在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”));

我认为最好使用纯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)}}

在没有任何框架的情况下,最简单的方法是使用element.classList.add方法。

var element = document.getElementById("div1");
element.classList.add("otherclass");

编辑:如果要从元素中删除类-

element.classList.remove("otherclass");

我宁愿不添加任何空格和重复条目处理(使用document.className方法时需要这样做)。浏览器存在一些限制,但可以使用polyfills解决这些限制。

如果您只针对现代浏览器:

使用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。

可以使用classList.add或classList.remove方法从元素中添加/删除类。

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

上述代码将向nameElem添加(而不是替换)一个类“anyclass”。类似地,可以使用classList.remove()方法删除类。

nameElem.classList.remove("anyclss")