★ 今日はこんな記事も読まれています ★

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

2018年5月6日Java Script

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

基本的な使い方

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

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

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

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

 

スタイルを付与する

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

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

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

$('要素').css('プロパティ', '値');
スタイルを２つ以上追加する
$('要素').css({'プロパティ': '値', 'プロパティ': '値'});
２つ以上のプロパティを追加する時は、{'プロパティ’: '値’,}で。

サンプルHTML・スクリプト

サンプルHTML

どうしてこうも<span id="element-1">忘れっぽい</span>んだろう。もう少し<span id="element-2">記憶力</span>がよくなればな。
サンプルscript
１つ目の文字を赤色に、２つ目の文字を緑で太字にします。
$('#element-1').css('color','red');$('#element-2').css({'color':'green','font-weight':'bold'});

結果

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

 

クラスを付与・消去する

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

クラスを消す場合

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

複数クラス削除の順番は気にしなくて大丈夫。

クラスを付与する場合

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

サンプル

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

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

これを一度消して、sample-1に入れ替えます。さらに２つ目の要素「記憶力」に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>がよくなればな。

script

$('#element-3').removeClass('sample-1').addClass('sample-2');
$('#element-4').removeClass('sample-2').addClass('sample-1');

結果

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

 

クラスをすべて消す

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

元

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

$('#element-5').removeClass();

結果

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

これだけでもOK。うまくいかなければ↓。

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

同じクラスを外したり加えたり

ボタンのオン・オフなどで同じクラスを入れたり外したりしたい時は、toggleClass() で。そのクラスがあれば外し、なければ足してくれます。

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

Java Script