使用JavaScript向所有具有另一个类名的元素添加CSS类

Question

我正在尝试使用JavaScript向所有具有不同类别的元素添加类。我知道你可能认为这很冗余，但对于我所处的情况来说是必需的。我需要一种方法来查看所有具有该类名的元素并添加类，但我不知道如何计数？我正在使用CMS工作，无法更改类本身的样式。

$(document).ready(function () {
            var ClassBtn = document.getElementsByClassName("buttonSubmit");

            ClassBtn.className = ClassBtn.className + " btn";


        });

- jackncoke

---

为什么要这样做？如果你想为拥有特定类名的所有元素添加另一个类，为什么不直接将同样的行为添加到原始元素类（如果是针对jQuery/JavaScript行为），或者在样式表中扩展/修改样式规则（如果是用于元素的样式/展示）？你提出的问题很简单，但似乎存在一个更好的解决方案来解决潜在的问题。 - David Thomas

Answer 1

看起来您正在使用jQuery:

演示

$(document).ready(function () {
    $('.buttonSubmit').addClass('btn'); 
});

没有使用jQuery：

实时演示

window.onload = function() {
    var buttons = document.getElementsByClassName("buttonSubmit"),
        len = buttons !== null ? buttons.length : 0,
        i = 0;
    for(i; i < len; i++) {
        buttons[i].className += " btn"; 
    }
}

- Brandon Boone

---

在ES6中，这段代码可以实现：[...document.getElementsByClassName("buttonSubmit")].forEach(x => x.className += ' btn')。 - phhu

或者，您也可以使用classList和querySelectorAll来隐藏所有的提交按钮：document.querySelectorAll('.buttonSubmit').forEach(x=>x.classList.add('hidden'))。 - phhu