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

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

现在,我想创建一个JavaScript函数,它将向div添加一个类(不是替换,而是添加)。

我该怎么做?


当前回答

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

其他回答

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

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

要以简单的方式添加、删除或检查元素类,请执行以下操作:

var uclass = {
    exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
    add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
    remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/  /g,' ');elem.className = c;}
};

var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');

在我的例子中,我在DOM中有多个称为主包装器的类,但我只想影响父主包装器。使用:第一选择器(https://api.jquery.com/first-selector/),我可以选择第一个匹配的DOM元素。这是我的解决方案:

$(document).ready( function() {
    $('.main-wrapper:first').addClass('homepage-redesign');
    $('#deals-index > div:eq(0) > div:eq(1)').addClass('doubleheaderredesign');
} );

我还对DOM中特定div的第二个孩子做了同样的事情,正如您在代码中看到的那样,我使用了$('#deals index>div:eq(0)>div:eq(1)').addClass('doubleheadrredesign');。

注意:如您所见,我使用了jQuery。

最短的

image1.parentNode.className+=' box';

image1.parentNode.className+=“box”;.box{width:100px;height:100px,background:red;}<div class=“someclass”><img。。。id=“images1”name=“image1”/></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”));