当我正在做的工作不需要使用库时，我使用以下两个函数：

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属性中添加一个空格，后跟新类。知道了这一点，您还可以编写一个函数，以便以后在需要时删除类。

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

大多数人在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”））；

要向元素添加其他类，请执行以下操作：

要在不删除/影响现有值的情况下将类添加到元素，请附加一个空格和新类名，如下所示：

document.getElementById("MyElement").className += " MyClass";

要更改元素的所有类，请执行以下操作：

要用一个或多个新类替换所有现有类，请设置className属性：

document.getElementById("MyElement").className = "MyClass";

（可以使用空格分隔的列表来应用多个类。）

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

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