jQueryでCSSのスタイルを追加する方法
jQueryではcss()メソッドを使用してCSSのスタイルを追加します。
構文は、css(“追加するCSS”)という形式です。
以下は、pointというIDがついたdiv要素に対して、CSSのスタイルを追加を追加する例です。
HTML
CSS
jQuery
実行結果
cssメソッドにより、#pointにbackground:redが追加されました。
複数のCSSのスタイルを追加する方法
次のように、{}を使い、プロパティと値の組み合わせをカンマで区切ることで複数のプロパティを同時に追加することができます。
構文は以下の通りです。
css({プロパティ1:値, プロパティ2:値, プロパティ3:値 });
HTML
CSS
jQuery
実行結果
cssメソッドにより、背景色を赤、文字色を白、要素の幅を200pxというcssのスタイルが追加されました。
追加するcssが1つの場合と2つの場合の書き方が若干異なるので、何度も書いて覚えてみてください。
CSSのスタイルを削除する方法
jQueryで直接CSSのスタイルを削除する方法について解説します。
構文は、以下の通りです。
$(‘要素’).css(‘プロパティ’,”);
では、実際に下記のCSSのスタイルの’width’:’200px’を削除してみましょう。
$(‘#point_ver_three’).css(‘width’, ”);
実行結果
ご覧の通りcssメソッドで指定したwidthの値を空にすることでwidthの指定を削除する事ができます。
class追加によるCSSのスタイルを追加する
もう1つの方法としてclassを追加することによってCSSのスタイルを追加するという方法があります。
その場合、jQueryのaddClassメソッドを使用します。
addClassメソッドの構文は以下の通りです。
$(‘要素’).addClass(class名);
それでは、実際にaddClassを使用してclassを追加してみましょう。
HTML
jQuery
実行結果
無事に.targetに、.padding_classを追加できました。
追加できたかどうかは、デベロッパーツールを見て確認してみるのが１番確実かと思いますので、その方法で確認してみてください。
class削除によるCSSのスタイルを削除する
classを削除するにはjQueryのremoveClassメソッドを使用します。
removeClassメソッドの構文は以下の通りです。
$(‘要素’).removeClass(class名);
それではjQueryのremoveClassメソッドを使用して、classを削除してみましょう！
$(‘.text’).removeClass(‘text’);
});
classがなければ追加、あれば削除する
指定した要素に指定したclassがない場合は追加、すでにある場合は削除するには、toggleClass()メソッドを使用します。
以下の例では、ボタンのクリック毎にclass名「padding_class」が追加・削除されます。
HTML
#btnをクリックしたら、#targetにpadding_classがつくというプログラムを書きます。
<button id="btn">ボタン</button>
jQuery
ボタンをクリックして頂けるとわかるかと思いますが、padding_classがついたり外れたりしています。
この挙動になれば成功です。
ターゲット要素
$(“#target”).toggleClass(“padding_class”);
});
our note サービス一覧
our noteはブログに加えて、下記のサービスを行っております。
バナー制作やコーディングなどの、Web制作に関するご依頼を頂いております。
また、私が制作したLINEスタンプの販売も行っております。
詳細は、下記をご覧ください。
ココナラ
「ココナラ」というサービスを活用して、バナー制作やコーディングの案件を受注しております。
品質を担保するため、最大2案件までとさせていただいております。
案件のご相談やご依頼がございましたら、ココナラからご依頼をお願いいたします。
ココナラ
LINEスタンプ
下記のボタンより、私が制作したLINEスタンプをご確認・ご購入いただけます。
LINEスタンプ