Nowsze wersje specyfikacji DOMTokenList pozwalają na użycie wielu argumentów do add()
i remove()
, a także drugiego argumentu toggle()
do wymuszenia stanu.
W chwili pisania tego tekstu Chrome obsługuje wiele argumentów do add()
i remove()
, ale żadna z innych przeglądarek nie obsługuje. IE 10 i starsze, Firefox 23 i starsze, Chrome 23 i starsze oraz inne przeglądarki nie obsługują drugiego argumentu do toggle()
.
Napisałem następujący mały polyfill, aby poprowadzić mnie do momentu rozszerzenia wsparcia:
(function () {
/*global DOMTokenList */
var dummy = document.createElement('div'),
dtp = DOMTokenList.prototype,
toggle = dtp.toggle,
add = dtp.add,
rem = dtp.remove;
dummy.classList.add('class1', 'class2');
// Older versions of the HTMLElement.classList spec didn't allow multiple
// arguments, easy to test for
if (!dummy.classList.contains('class2')) {
dtp.add = function () {
Array.prototype.forEach.call(arguments, add.bind(this));
};
dtp.remove = function () {
Array.prototype.forEach.call(arguments, rem.bind(this));
};
}
// Older versions of the spec didn't have a forcedState argument for
// `toggle` either, test by checking the return value after forcing
if (!dummy.classList.toggle('class1', true)) {
dtp.toggle = function (cls, forcedState) {
if (forcedState === undefined)
return toggle.call(this, cls);
(forcedState ? add : rem).call(this, cls);
return !!forcedState;
};
}
})();
Nowoczesna przeglądarka zgodna z ES5 i DOMTokenList
oczekiwana, ale używam tego polyfill w kilku specjalnie ukierunkowanych środowiskach, więc działa świetnie, ale może wymagać poprawek dla skryptów, które będą działać w starszych środowiskach przeglądarek, takich jak IE 8 i starsze .