如何使用JavaScript添加class名

在web開發中，經常需要通過JavaScript來操作DOM元素。其中，添加class名是比較常見的一種操作。下面我們將從幾個方面詳細闡述如何使用JavaScript添加class名。

$(selector).addClass(className);

jQuery提供了一個addClass()方法，可以非常方便地給指定元素添加class名。其中，selector是CSS選擇器，className是要添加的class名。以下是一個示例：

<div id="demo"></div>

$(document).ready(function(){
  $("#demo").addClass("center");
});

上面的示例中，在頁面載入完成後，jQuery會選中id為demo的元素，並添加名為center的class。

element.classList.remove(className);

如果需要使用原生JavaScript來刪除某個元素的class，可以使用classList.remove()方法。其中，element是要刪除class的元素，className是要刪除的class名。以下是一個示例：

<div id="demo" class="center"></div>

var demo = document.getElementById("demo");
demo.classList.remove("center");

上面的示例中，先通過getElementById()方法獲取id為demo的元素，然後使用classList.remove()方法刪除該元素的名為center的class。

element.classList.add(className);

與刪除class不同，原生JavaScript早期是沒有提供添加class名的方法的。不過，現代瀏覽器都支持classList.add()方法，可以很方便地給元素添加class。以下是一個示例：

<div id="demo"></div>

var demo = document.getElementById("demo");
demo.classList.add("center");

上面的示例中，在頁面載入完成後，先通過getElementById()方法獲取id為demo的元素，然後使用classList.add()方法添加名為center的class。

js.class('className')(element);

jsclass是一個輕量級的JavaScript庫，提供了許多操作DOM元素的功能。它比jQuery更輕量級，同時也不失靈活性。以下是一個示例：

<div id="demo"></div>

js.class('center')(document.getElementById('demo'));

上面的示例中，先使用js.class()方法創建一個名為center的class，然後使用document.getElementById()方法獲取id為demo的元素並添加該class。

element.className = "class1 class2";

在早期的JavaScript中，添加和刪除class名的方法是直接操作元素的className屬性。通過對該屬性進行賦值來達到添加和刪除class名的目的。以下是一個示例：

<div id="demo" class="class1"></div>

var demo = document.getElementById("demo");
demo.className = "class2";

上面的示例中，先通過getElementById()方法獲取id為demo的元素，然後將其className屬性直接賦值為class2，以刪除原有的class1並添加新的class2。

element.setAttribute("class", className);

除了直接操作className屬性以外，還可以使用setAttribue()方法來添加class。其中，element是要添加class的元素，className是要添加的class名。以下是一個示例：

<div id="demo"></div>

var demo = document.getElementById("demo");
demo.setAttribute("class", "center");

上面的示例中，在頁面載入完成後，先通過getElementById()方法獲取id為demo的元素，然後使用setAttribute()方法添加名為center的class。

element.classList.toggle("active");

在一些交互的場景中，需要給元素動態添加或刪除class名。比如，點擊某個元素後，需要給該元素添加active類名。此時，可以使用classList.toggle()方法實現。以下是一個示例：

<div id="demo">點擊我</div>

var demo = document.getElementById("demo");
demo.onclick = function() {
  this.classList.toggle("active");
}

上面的示例中，使用demo的onclick事件來控制點擊時添加或刪除active類名。當demo元素沒有active類名時，點擊後會添加該名稱；當已經有active類名時，點擊後會刪除該名稱。

element.classList.replace(oldClass, newClass);

在一些場景中，需要動態地改變一個元素的class名。此時，可以使用classList.replace()方法實現。其中，element是要改變class名的元素，oldClass是要替換的舊class名，newClass是要替換成的新class名。以下是一個示例：

<div id="demo" class="class1"></div>

var demo = document.getElementById("demo");
demo.classList.replace("class1", "class2");

上面的示例中，先通過getElementById()方法獲取id為demo的元素，然後使用classList.replace()方法將所有class1替換成class2。

通過以上幾種方式，我們可以很方便地使用JavaScript添加class名。不同的方法適用於不同的場景，需要根據具體情況選擇使用哪一種方法。

原創文章，作者：DCOU，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/143441.html