className和classList的區別

在什么情況下應該優先選擇以下哪一項？

btnElement.classList.add('btn');

btnElement.className = 'btn';

uj5u.com熱心網友回復：

使用“classList”，您可以添加或洗掉一個類，而不會影響該元素可能具有的任何其他類。但是，如果您分配“className”，它會在添加新類時清除所有現有類（或者如果您分配一個空字串，它將清除所有類）。

在您確定不會在元素上使用其他類的情況下，分配“className”可能會很方便，但我通常會專門使用“classList”方法。

而“classList”也有方便的“toggle”和“replace”方法。

https://teamtreehouse.com/community/difference-between-classlist-and-classname

uj5u.com熱心網友回復：

使用“classList”，您可以添加或洗掉一個類，而不會影響該元素可能具有的任何其他類。但是，如果您分配“className”，它會在添加新類時清除所有現有類（或者如果您分配一個空字串，它將清除所有類）

類串列

使用 classList，您可以添加或洗掉一個類，而不會影響該元素可能具有的任何其他類。

因此，這有助于向包含其他類的元素添加其他類。

classList 有一些方便的方法，如切換和替換。

if (clicked) {
    button.classList.add('clicked');
} else {
    button.classList.remove('clicked');
}

在這里，如果按鈕被點擊，它將添加被點擊的類以及元素可能具有的其他類，并且它只會從元素中洗掉被點擊的類。

班級名稱

如果您使用 className，它會在添加新類時清除所有現有類（或者如果您分配一個空字串，它將清除所有類）。

當您知道此元素不會使用任何其他類時，使用 className 會很方便。

if (clicked) {
    button.className = 'clicked';
} else {
    button.className = '';
}

在這種情況下， className 將清除元素可能具有的所有類，并向其添加單擊的類。空字串('') 將擦除所有類。

結論

建議是盡可能使用 className。

當您需要 classList 方法（如切換、替換等）時，請使用 classList。

背景關系 https://dev.to/microrony/difference-between-classlist-and-classname-45j7

uj5u.com熱心網友回復：

顧名思義，ClassList 是元素中的類串列。

如果你在一個元素上有多個類，并且你想添加/洗掉一個而不改變其余的類，你應該使用classList.

classList還提供了toggle非常有用的方法。

function toggleClass(){
  let txt = document.querySelector("h2");
  txt.classList.toggle("changebg");
}

.font-style {
  font-family: sans-serif;
}

.changebg {
  background-color: lightcoral;
}

<h2 class="font-style" >Hello World!</h2>
<button onclick='toggleClass()'>Toggle Background Class</button>

uj5u.com熱心網友回復：

您可以看到JavaScript 中的更改以應用相同的差異，一個是使用 ，classList另一個是className。

從第 1 個 btn 中可以清楚地看出，classList在classwhile中添加額外的名稱會className替換整個class（僅.border應用）。
進一步是classList無法實作的不同功能，className最后 4 行代碼使用toggle.

因此，您應該考慮自己的需求：例如，如果您想完全替換class屬性名稱而不是使用className其他名稱，則可以使用classList具有不同方法的屬性.add() .remove() .replace() .toggle()來僅進行特定更改，而不會妨礙所有名稱class

以下代碼段的說明：單擊一個按鈕時重新加載代碼段，以便在下一個 btns 上可以看到明顯的差異

var classList1 = document.getElementById("part1")
var classname2 = document.getElementById("part2")

function funcAdd() {
  classList1.classList.add("border");
  classname2.className = "border";
}

function funcRemove() {
  classList1.classList.remove("color");
  classname2.style.color = "black";
}

function funcReplace() {
  classList1.classList.replace("background", "background1");
  classname2.style.backgroundColor = "lightgreen";
}

function funcToggle() {
  classList1.classList.toggle("color1");
  if (classname2.style.color == "gold") {
    classname2.style.color = "blue";
  } else {
    classname2.style.color = "gold";
  }
}

.background {
  background-color: red
}

.background1 {
  background-color: lightgreen
}

.color {
  color: blue
}

.font {
  font-size: 24px;
}

.border {
  border: 10px solid black
}

.color1 {
  color: gold;
}

<div id="part1" class="background color font">classList</div>
<br><br><br>

<div id="part2" class="background color font">className</div>
<br><br><br>

<button onclick="funcAdd()">Add a border class</button>
<button onclick="funcRemove()">Remove a color class</button>
<button onclick="funcReplace()">Replace a background class</button>
<button onclick="funcToggle()">Toggle a color class</button>
<br><br>

標籤：javascript html css dom

上一篇：查找HTML檔案中任意位置的兩個元素在DOM中的相對位置

下一篇：javascript中是否有任何方法可以為一個HTML元素單獨操作一個函式？