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

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

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

styleを変更する

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

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

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

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

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

$('#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');