Question

正如标题所说。我似乎无法看到两者之间的区别，我似乎无法看到第二个论点的切换点。

有人可以向我解释一下吗？

Answer 1

没有区别; toggle的第二个参数是使这种事情更方便：

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

为：

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

Answer 2

有一个小差异，classList.toggle() force 参数设置为true与classList.add()相同，但它会返回不同的值。

成功添加类时，带有force参数集的

classList.toggle()会返回true，而false和classList.add()会成功删除classList.remove()未定义。

// 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 ，则“切换”令牌，如果它存在则将其删除，如果不存在则添加它。如果 force 为true，则添加 token （与add（）相同）。如果 force 为false，则删除 token （与remove（）相同）。如果 token 现在存在，则返回true，否则返回false。

我认为规范已经足够清楚了。

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

4 个答案: