jQuery　要素にクラス、idを追加、削除する方法

class、idは本来、htmlで定義しますが
何らかの動作時にのみclass、idを追加したい場面が多々あります。
そんな時に使える、jQueryでのclass、idの追加削除方法をまとめました。

classの追加「addClass」

$(‘要素’).addClass(‘クラス名’);
 
（例）headerに「fixed」というclassを追加する場合

 

classは複数追加することも出来ます。
$(‘要素’).addClass(‘クラス名 クラス名 クラス名’)

classの削除「removeClass」

$(‘要素’).removeClass(‘クラス名’);
 
（例）headerから「fixed」というclassを削除する場合

 

【応用】スクロールが100に達したらheaderを固定する

classがあれば削除、なければ追加「toggleClass」

$(‘要素’).toggleClass(‘クラス名’);
 
（例）headerに「fixed」というclassがあれば削除、なければ追加する場合

idの追加「attr」

$(‘要素’).attr(‘id’,’id名’);
 
（例）headerに「fixed」というidを追加する場合

idの削除「removeAttr」

$(‘要素’).removeAttr(‘id’);
 
（例）headerからidを削除する場合
$(‘header’).removeAttr(‘id’);

 

スクロール時、PC表示とSP表示時にcssプロパティを変えたい場合など、
使える場面が沢山あるので是非覚えておきましょう！