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

      2016/06/01

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

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

■追加方法

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

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

 

■変更方法

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

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

 

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

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

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

 

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

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery ,