脱jQuery~JavaScriptに支配されないための真の思考法~ addClassメソッド
jQueryのaddClassメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。
まずは、addClassメソッドを使って一つクラス名を設定する方法について。
// jQuery $('#hoge').addClass('foo'); // JavaScript document.querySelector('#hoge').classList.add('foo'); // jQuery $('.hoge').addClass('foo'); // JavaScript document.querySelectorAll('.hoge').forEach(function(currentValue){ currentValue.classList.add('foo'); });
次にaddClassメソッドを使って複数のクラス名を設定する方法について。
// jQuery $('#hoge').addClass('foo bar'); // JavaScript 'foo bar'.split(' ').forEach(function(currentValue){ document.querySelector('#hoge').classList.add(currentValue); }); // jQuery $('.hoge').addClass('foo bar'); // JavaScript document.querySelectorAll('.hoge').forEach(function(currentElement){ 'foo bar'.split(' ').forEach(function(currentValue){ currentElement.classList.add(currentValue); }); });
addメソッドはクラス名を複数設定することができるみたいなのだが、IE11が対応していないのでループをまわした書き方にした。