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

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

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

我该怎么做?


当前回答

这可能对WordPress开发人员等有帮助。

document.querySelector('[data-section="section-hb-button-1"] .ast-custom-button').classList.add('TryMyClass');

其他回答

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

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

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

首先,给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>
document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

当第二种方法不起作用时,第一种方法有助于添加类。在第一种方法中,不要忘记在“someclassname”前面留一个空格。

对于删除,您可以使用:

document.getElementById('some_id').classList.remove('someclassname')

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

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

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

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

nameElem.classList.remove("anyclss")