如何使用 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>

警報有效，但未添加 class。另外，由於 class 相同，我如何縮短此代碼而不是為每個 ID 添加新行？

Answer 1

classList.add采用多個參數，但不接受其中包含空格的字符串。 您可以傳入多個字符串，或者如果您將類以"firstClass secondClass thirdClass"的形式存儲在變量classes中，則可以使用.split(' ')按空格拆分，然后使用擴展運算符...來將數組的內容作為單獨的 arguments 傳遞到classList.add中。

對於這種情況，這甚至更簡單，因為每個元素共享相同的類：

（編輯：OP 實際上在每個頁面上運行此代碼，包括那些沒有相關元素的頁面，因此如果 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>

Answer 2

您不必通過 ID 分別訪問每個字段，只需為它們提供相同的 class 並循環遍歷該 class。

<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");
        });
    }