Javascript(jQuery)でcssとclassの追加・削除をしてみよう！

Javascript(jQuery)でcssとclassの追加・削除をしてみよう！JavaScript
2024.03.06

jQueryでCSSのスタイルを追加する方法

jQueryではcss()メソッドを使用してCSSのスタイルを追加します。

構文は、css(“追加するCSS”)という形式です。

以下は、pointというIDがついたdiv要素に対して、CSSのスタイルを追加を追加する例です。

HTML

<div id="point">あいうえお</div>

CSS

#point { padding: 1rem; }

jQuery

$(“#point”).css(“background”, “red”);

実行結果

cssメソッドにより、#pointにbackground:redが追加されました。

あいうえお

複数のCSSのスタイルを追加する方法

次のように、{}を使い、プロパティと値の組み合わせをカンマで区切ることで複数のプロパティを同時に追加することができます。

構文は以下の通りです。

css({プロパティ1:値, プロパティ2:値, プロパティ3:値 });

HTML

<div id="point_ver_two">あいうえお</div>

CSS

#point_ver_two { padding: 1rem; }

jQuery

$(“#point_ver_two”).css({‘background’:’red’, ‘color’:’#fff’, ‘width’:’200px’});

実行結果

cssメソッドにより、背景色を赤、文字色を白、要素の幅を200pxというcssのスタイルが追加されました。

追加するcssが1つの場合と2つの場合の書き方が若干異なるので、何度も書いて覚えてみてください。

あいうえお

CSSのスタイルを削除する方法

jQueryで直接CSSのスタイルを削除する方法について解説します。

構文は、以下の通りです。

$(‘要素’).css(‘プロパティ’,”);

では、実際に下記のCSSのスタイルの’width’:’200px’を削除してみましょう。

$(“#point_ver_three”).css({‘background’:’red’, ‘color’:’#fff’, ‘width’:’200px’});

$(‘#point_ver_three’).css(‘width’, ”);

実行結果

ご覧の通りcssメソッドで指定したwidthの値を空にすることでwidthの指定を削除する事ができます。

あいうえお

class追加によるCSSのスタイルを追加する

もう1つの方法としてclassを追加することによってCSSのスタイルを追加するという方法があります。

その場合、jQueryのaddClassメソッドを使用します。

addClassメソッドの構文は以下の通りです。

$(‘要素’).addClass(class名);

それでは、実際にaddClassを使用してclassを追加してみましょう。

HTML

<div class="target">.targetに、.padding_classを追加</div>

jQuery

$(‘.target’).addClass(‘padding_class’);

実行結果

.targetに、.padding_classを追加

無事に.targetに、.padding_classを追加できました。

追加できたかどうかは、デベロッパーツールを見て確認してみるのが１番確実かと思いますので、その方法で確認してみてください。

<div class="target padding_class">padding:1remのスタイルを追加</div>

class削除によるCSSのスタイルを削除する

classを削除するにはjQueryのremoveClassメソッドを使用します。

removeClassメソッドの構文は以下の通りです。

$(‘要素’).removeClass(class名);

それではjQueryのremoveClassメソッドを使用して、classを削除してみましょう！

$(function () {
$(‘.text’).removeClass(‘text’);
});

classがなければ追加、あれば削除する

指定した要素に指定したclassがない場合は追加、すでにある場合は削除するには、toggleClass()メソッドを使用します。

以下の例では、ボタンのクリック毎にclass名「padding_class」が追加・削除されます。

HTML

#btnをクリックしたら、#targetにpadding_classがつくというプログラムを書きます。

<p id="target">ターゲット要素</p>
<button id="btn">ボタン</button>

jQuery

ボタンをクリックして頂けるとわかるかと思いますが、padding_classがついたり外れたりしています。

この挙動になれば成功です。

ターゲット要素

$(“#btn”).on(“click”, function(){
$(“#target”).toggleClass(“padding_class”);
});

our note サービス一覧

our noteはブログに加えて、下記のサービスを行っております。

バナー制作やコーディングなどの、Web制作に関するご依頼を頂いております。

また、私が制作したLINEスタンプの販売も行っております。

詳細は、下記をご覧ください。

ココナラ

LINEスタンプ ゲーマーズスタンプ

「ココナラ」というサービスを活用して、バナー制作やコーディングの案件を受注しております。

品質を担保するため、最大2案件までとさせていただいております。

案件のご相談やご依頼がございましたら、ココナラからご依頼をお願いいたします。

ココナラ

タイトルとURLをコピーしました