[jQuery]でcssプロパティを動的に追加、変更、削除する

jQueryでHTML要素にcssプロパティを動的に追加・変更・削除する記述方法のメモ。
cssのstyle属性を直書きする場合はcss()メソッドを、cssを追加する場合はaddClass( )削除する場合はremoveClass( )メソッドを使用します。

• 直書きcss( )

• 追加 addClass( )

• 削除 removeClass( )

前提

事前に、html内でjQueryを読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

記述方法

jQueryでstyle属性を直書きしたい場合は[css( )]メソッド

ひとつのstyle属性の場合

$('要素').css('プロパティ','値');

複数のstyle属性の場合

$('要素').css({'プロパティ':'値','プロパティ':'値'});

HTML内の要素にcssを追加、削除したい場合は[addClass( )] [removeClass( )]メソッド

要素にClassを追加する

$('要素').addClass('css名');

要素についているClassを削除する

$('要素').removeClass('css名');

「css( )」メソッドでstyle属性の追加、変更、削除

• ひとつのcssプロパティの場合 例えば、HTML要素にclass「test」がついた要素のcss「color」を「blue」に追加,変更したい場合

$('.test').css('color','blue');

これでcssが追加され、既にcolor指定されていた場合でも、この記述が有効になります。

• 複数のcssプロパティの場合 例えば、ID「jedy」がついた要素のcss「color」を「blue]に、[font-size」を[20px]に追加、変更したい場合

$('#jedy').css({'color':'blue','font-size':'20px'});

• cssプロパティの削除 例えば、class「test」がついた要素のcss「color」指定を削除したい場合

$('.test').css('color','');

「addClass()」「removeClass()」メソッドでcssの追加,削除

• cssを追加 例えば、ID「jedy」がついた要素にcss「force」を追加したい場合

$('#jedy').addClass('force');

• cssを削除

$('#jedy').removeClass('force');

複数cssプロパティを用意しておいて、動的に変更するときなどに便利です。