jQueryとJavaScriptの書き方を比較!class属性の操作編

@ハクト 2022-11-28 13:03:13に投稿

jQueryとJavaScriptでクラス属性の書き方を比較してみました。

JSでもかなりシンプルに指定可能です。

取得

let cls1=$('#foo').attr('class');
let el=document.querySelector('#foo');
//以下、3つの方法で取得可能
let cls1=el.getAttribute('class');
let cls2=el.className;
let cls3=el.classList.value;

追加

$('#foo').addClass('bar');
$('#foo').addClass('baz qux'); //複数追加
let el=document.querySelector('#foo');
el.classList.add('bar');
el.classList.add('bar','qux'); //複数追加

削除

$('#foo').removeClass('bar');
$('#foo').removeClass('baz qux'); //複数削除
let el=document.querySelector('#foo');
el.classList.remove('bar');
el.classList.remove('bar','qux'); //複数削除

切り替え(指定したclassがあれば削除、なければ追加)

$('#foo').toggleClass('bar');
$('#foo').toggleClass('baz qux'); //複数指定 
let el=document.querySelector('#foo');
el.classList.toggle('bar');
el.classList.toggle('bar','qux'); //複数指定

存在有無を確認

$('#foo').hasClass('bar');
$('#foo').hasClass('baz qux'); //複数指定
let el=document.querySelector('#foo');
el.classList.contains('bar');
el.classList.contains('bar','qux'); //複数指定

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter