jQuery でスタイルを動的に変更する

Java Script

jQurery でスタイルを動的に変更する方法。なぜか間違えがちなのでメモ。

基本的な使い方

jQuery が必要なので、コードの前に置いてください。

一般的な jQuery の記法を使います。要素はクラスなら $(‘.クラス名)、IDなら $(‘#ID’) で指定して、cssとClassを操作するメソッドを使います。

WordPress で jQuery を使う場合は、おまじないとして jQuery(function($){}); をつけて、 “jQuery(function($){jQueryのコード})”;の形にしてください。

スタイルの記述はCSSの書き方でOK。

 

スタイルを付与する

css メソッドでスタイル属性を変更できます。既存のスタイルは上書きされます。

id ではなく class にすれば、複数の要素に適用できます。

 

スタイルをひとつだけ追加

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

スタイルを2つ以上追加する

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

2つ以上のプロパティを追加する時は、{}でくくる

サンプルと結果

サンプルHTML

どうしてこうも<span id="element-1">忘れっぽい</span>んだろう。もう少し<span id="element-2">記憶力</span>がよくなればな。

1つ目の文字を赤色に、2つ目の文字を緑で太字にします。

<script>$('#element-1').css('color','red');$('#element-2').css({'color':'green','font-weight':'bold'});</script>

どうしてこうも忘れっぽいんだろう。もう少し記憶力がよくなればな。

 

クラスを付与・消去する

jQuery ではクラスを指定して動的に消去したり追加することができます。

 

クラスを消す場合

$('要素').removeClass('クラス名');

クラスを付与する場合

$('要素').addClass('クラス名');

サンプル

サンプルの文章の1つ目の要素「忘れっぽい」には、最初から sample-2のスタイルを適用してあります。

これを一度消して、sample-1に入れ替えます。さらに2つ目の要素「記憶力」にsample-2を加えます。

スタイル

<style>
.sample-1{color:blue;font-size:larger;font-weight:bold;}
.sample-2{color:white;background:red;}
</style>

HTML

どうしてこうも<span id="element-3" class="sample-2">忘れっぽい</span>んだろう。もう少し<span id="element-4">記憶力</span>がよくなればな。

結果

どうしてこうも忘れっぽいんだろう。もう少し記憶力がよくなればな。

クラスをすべて消す

クラスを全て削除したい時はクラスを取得してから revemoClass() を使います。

var class_name = $('#myTable').attr('class');
$('#myTable').removeClass(class_name);