classList.toggle（'class'，true）vs classList.add

Question

正如標題所說。 我似乎無法看到兩者之間的區別，我似乎無法看到第二個參數的切換點。

有人可以向我解釋一下嗎？

Answer 1

沒有區別; toggle的第二個參數是使這種事情更方便：

if (hide) {
    el.classList.add('hidden');
} else {
    el.classList.remove('hidden');
}

如：

el.classList.toggle('hidden', hide);

Answer 2

有一個小的差異， classList.toggle()設置為true 力參數不一樣classList.add()但它返回一個不同的值。

帶有force參數set的classList.toggle()在成功添加類時返回true在成功刪除時返回false ，而classList.add()和classList.remove()返回undefined。

// returns undefined
classList.add('myClass'); 
classList.remove('myClass'); 

// returns true if class was added, false if it wasn't for some reason
var was_added = classList.toggle('myClass', true) === true;

// returns false if class was removed, true if it wasn't removed for some reason
var was_removed = classList.toggle('myClass', false) === false;

這樣可以更容易地檢查添加/刪除是否成功

Answer 3

第二個參數可以是返回TRUE或FALSE的表達式。 例如

var isEven  = function(x) { return !( x & 1 ); };

// if element already has even class it does nothing, else it will add even class
element.classList.toggle('even', isEven(2))

// if element has even class, it will remove it, otherwise does nothing
element.classList.toggle('even', isEven(1))

我認為你可以用if語句做同樣的事情，但這更優雅

Answer 4

https://dom.spec.whatwg.org/#interface-domtokenlist ：

如果沒有給力 ，則“切換” 令牌 ，如果它存在則將其刪除，如果不存在則添加它。 如果force為true，則添加token （與add（）相同）。 如果force為false，則刪除令牌 （與remove（）相同）。 如果token現在存在則返回true，否則返回false。

我認為規范很清楚。