jQueryでstyleやcssを動的に変更する方法！

jQueryを使って画面のstyleを書き換えたい！
jQueryを使って画面のcssを追加したり削除したりしたい！
と、動的に見た目を切り替えたいという事がよくあります。

よく使っているのになかなか覚えられずいつも調べているのでまとめておこうと思います。

styleを変更する

style属性を変更する場合には　.css　を使います。

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

例えば、id=hoge の要素に対してフォントサイズを15ptにする場合は、このように書きます。

$('#hoge').css('font-size','15pt');

削除する場合はこのように値の部分に空を設定すると削除できます。

$('#hoge').css('font-size','');

また、下記のようにすると、指定した要素のstyleに指定している値が取得できます。

$('#hoge').css('font-size');

cssを追加したり削除するには　.addClass　と　.removeClass　を使います。

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

例えば、id=hoge の要素に対して”row”というcssを追加する場合はこのように書きます。

$('#hoge').addClass('row');

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

例えば、id=hoge の要素に対して”row”というcssを削除する場合はこのように書きます。

$('#hoge').addClass('row');