原生js添加類名-從多個方面進行詳細闡述

一、原生js添加類名不覆蓋原有類名

const element = document.getElementById("example");
element.classList.add("new-class");

在添加新的類名之前，我們可以檢查元素上是否已經有這個類名。 首先，我們確保元素存在，然後我們可以檢查類名，並根據情況添加。

const element = document.getElementById("example");
if (!element.classList.contains("new-class")) {
  element.classList.add("new-class");
}

二、原生js增加類名

const element = document.getElementById("example");
element.className += " new-class";

使用此方法時需要注意，必須添加空格，否則類名將合併在一起。

三、js給元素添加類名

const element = document.createElement('div');
element.classList.add('new-class');

我們可以使用 createElement() 方法創建新的元素，然後使用 classList.add() 方法向其添加類名

四、js添加類名的方法

const element = document.getElementById("example");
element.setAttribute("class", "new-class");

我們可以使用 setAttribute() 方法來添加類名,在這種情況下，元素的 class 屬性將被替換。

五、原生js添加css樣式

const element = document.getElementById("example");
element.style.color = "red";

我們可以使用樣式屬性直接將 CSS 樣式應用於元素，而不是通過 CSS 類添加它們。

六、原生js刪除類名

const element = document.getElementById("example");
element.classList.remove("old-class");

我們可以使用 classList.remove() 方法從元素中刪除類名。

七、js點擊添加類名

const element = document.getElementById("example");
element.addEventListener("click", function() {
  element.classList.toggle("active");
});

在單擊該元素時，我們可以使用 classList.toggle() 方法向其添加/刪除類名。

八、js里添加類名

const element = document.getElementById("example");
element.className = "old-class new-class";

我們可以通過改變className屬性，直接在JS中向元素添加類名。

九、js動態添加類名

const element = document.getElementById("example");
const newClass = "new-class";
element.classList.add(newClass);

如果我們需要在運行時動態地添加類名，我們可以將類名存儲在變量中，並將其傳遞給classList.add() 方法。