JQueryでclassを追加・変更する方法

JQueryでclassを追加・変更する方法 jQuery

JQueryを利用して、タグのclassを変更する方法です。JQueryを使ってclassを変更することで、文字の色や背景の色を動的に変更することができます。

■追加方法

以下のように記述すると、targetクラスが指定してあるタグにnewclassクラスが追加されます。

$('.target').addClass('newclass');

 

■変更方法

変更する際は、一度削除してから他のクラスを追加するようにします。

$('.target').removeClass('oldclass');
$('.target').addClass('newclass');

 

■追加と削除を交互に行う(トグル動作)

以下の様に記述をすると、newclassクラスが存在するときは削除され、存在しない時は追加されるようになります。

$('.target'). toggleClass('newclass');

 

色を変更したり、大きさを変更したり、システム開発の上でかなり利用することが多い操作だと思います。参考にしてみてください。