如何使用JS向元素添加多个类？

Question

我有以下JS代码：

<script>
    function CommentStyle() {
        var elementAuthor = document.getElementById("author");
        var elementEmail = document.getElementById("email");
        var elementUrl = document.getElementById("url");
        elementAuthor.classList.add("form-control ulockd-form-bps required email");
        elementEmail.classList.add("form-control ulockd-form-bps required email");
        elementUrl.classList.add("form-control ulockd-form-bps required email");
    }
    window.onload = CommentStyle;
    alert("Hello! I am an alert box!!");
</script>
ffee
<style>
    .form-control {
        border: 1px dashed #cccccc;
    }
</style>

提示框可以正常工作，但是类没有被添加。此外，我该如何缩短这段代码，而不是为每个id添加新行，因为类是相同的？

- Display name

---

你不应该“缩短”代码，而是应该将类列表放入一个const中，并使用它来代替重复的字符串。 - Niet the Dark Absol

Answer 1

classList.add接受多个参数，但不接受带有空格的字符串。您可以传递多个字符串，或者如果您的类以"firstClass secondClass thirdClass"的形式存储在变量classes中，则可以使用.split(' ')按空格拆分，并使用展开运算符...将数组内容作为单独的参数传递给classList.add。

对于这种情况，甚至更简单，因为每个元素共享相同的类：

(编辑：事实上作者在每个页面上都运行了此代码，包括那些没有相关元素的页面，因此添加了一个检查以退出页面如果它们不存在于DOM中。)

function CommentStyle() {
  let elementAuthor = document.getElementById("author"),
      elementEmail = document.getElementById("email"),
      elementUrl = document.getElementById("url");
      
  // check IDs exist
  if (!elementAuthor || !elementEmail || !elementUrl) return;
  let classes = "form-control ulockd-form-bps required email".split(' ');
  
  elementAuthor.classList.add(...classes),
  elementEmail.classList.add(...classes),
  elementUrl.classList.add(...classes);

  // for demo purposes:
  let [authorClasses, emailClasses, urlClasses] = [
    elementAuthor.className,
    elementEmail.className,
    elementUrl.className
  ];

  console.log({
    authorClasses,
    emailClasses,
    urlClasses
  });
}

window.onload = CommentStyle;

<label for="author">Author</label><br>
<input type="text" id="author"><br><br>

<label for="email">Email</label><br>
<input type="text" id="email"><br><br>

<label for="email">Url</label><br>
<input type="text" id="url"><br>

- C. Lewis

---

我在控制台上得到了这个错误： (index):1451 Uncaught TypeError: Cannot read property 'classList' of null at CommentStyle ((index):1451) at window.onload (waypoints.min.js?ver=4.0.2:1) - Display name

@显示名称 这意味着在运行时找不到其中一个或多个元素ID（因此我们正在尝试访问“未定义”的.classList）。如果您对此代码收到该错误，则在先前的代码中也会存在此错误。这些元素必须在页面上准备就绪，并且可以修改它们的行为。 - Lewis

添加了条件退出，基于此线程构建：https://stackoverflow.com/questions/62314408/cannot-read-property-classlist-of-null-js/62314478#62314478 - Lewis

Answer 2

您不必通过ID单独访问每个字段，只需给它们所有相同的类并循环遍历该类即可。

<div class="comment-field" id="author"></div>
<div class="comment-field" id="email"></div>
<div class="comment-field" id="url"></div>

function CommentStyle() {
        var comment_fields = document.querySelectorAll(".comment-field");
        comment_fields.forEach(function(el){
          el.classList.add("form-control","ulockd-form-bps","required","email");
        });
    }

- imvain2