JavaScript

jQueryでCSSメソッドを使ってHTMLのstyleを変更する方法

Webサイトを作っているとクリックやマウスオーバーのイベントが起きたときに文字色を変えたり、隠した文字を表示させたいことがあると思います。jQueryを使えば、イベント発生で文字色を変えたり、隠した文字を表示させることができます。

jQueryのCSSメソッドを使えば、CSSを操作することができます。CSSを操作することでWebページの表示状態をコード変更なしで変更します。本記事ではjQueryでHTMLのstyleを変えるCSSメソッドを解説します。

CSSメソッドは動的にstyleを追加、変更、削除する

CSSメソッドはHTMLのstyleを動的に追加・変更・削除するためのjQueryのコードです。CSSメソッドを使えば、ボタンをクリックすると文字色や文字サイズを変えたり、非表示の文章を表示させることが可能です。

本来であれば、CSSのコードを変更しなければHTMLの表示が変わることはありません。しかし、jQueryはCSSを操作するため、HTML、CSSファイルを変更することなく、HTMLの表示を変えることができます。

CSSメソッドの基本構文

CSSを追加する

CSSメソッドではをCSSを指定していない要素に追加することができます。CSSを追加するための基本構文は以下の通りです。

$(“セレクタ”).css(“プロパティ”,”値”);

セレクタはCSSを追加したい要素のタグ名やid名、class名を記述します。CSSの括弧の中にはシングルまたはダブルクォーテーションでプロパティを書き、コンマで区切って同じくシングルまたはダブルクォーテーションで値を記述します。

例えば、h2タグの文字色を赤色にするとします。コードは以下の通りです。

$(“h2”).css(“color”,”red”);

CSSを変更する

CSSが指定されている要素の値を変える方法はCSSを追加する方法と同じです。基本構文も同じです。h2タグの文字色を赤色に変えるコードはh2タグに元々別の色が指定されていたとしても、赤色に文字色を変えます。

CSSを削除する

CSSを削除する場合には、削除したいプロパティを指定して、値の部分を空白で指定します。すると、CSSの値を空にするため、コードが削除されたのと同様の扱いになります。例えば、CSSファイルで文字を太字にしていたpタグの文字を元に戻すコードは以下の通りです。

$(“p”).css(“font-weight”,””);

空白を返すときは、シングルまたはダブルクォーテーションを重ねればOKです。

複数のCSSを追加・変更・削除する

1つの要素に対して複数のCSSを追加・変更・削除する場合はコードの書き方が変わります。基本構文は以下の通りです。

$(“セレクタ”).css({“プロパティ”:”値”,”プロパティ”:”値”,・・・});

複数のCSSを追加・変更・削除する時には()の中に{}を入れます。そして、プロパティと値の間はコロン(:)で区切ります。ここは1つで指定する時とは違うので気を付けてください。そして、1つ目のCSSと2つ目のCSSの間をコンマ(,)で区切ります。

1つだけ指定するときと2つ以上指定するときでは、記述方法が少し変わります。もし、CSSメソッドを指定した際にコードが上手く動かない場合は、真っ先に確認することをおすすめします。

CSSメソッドが使われる場面

非表示⇒表示にする

CSSメソッドが使われる場面として、ボタンやマウスオーバーで非表示にしている文章を表示させることがあります。非表示を表示にする場合は、CSSでdisplay:noneをblockにすることで可能です。コードは以下の通りです。

<button>表示</button>
<p>クリックで表示されました</p>
p{
    display:none;
}
$(“button”).on(“click”,function(){
    $(“p”).css(“display”,”block”);
});

上記のコードではボタンを押すと文字が表示されます。初期の状態では文字を隠すためにdisplayをnoneにしておきます。そして、ボタンを押されたときの処理をjQueryで書きます。displayにblockを指定することで、非表示が表示されます。

マウスオーバーで強調される

もう一つCSSメソッドを使う例として、マウスオーバーで文字を強調することです。ここではh2タグの部分にマウスが乗ったら、pタグの文字を大きくして、色を赤色にするコードを紹介します。

<h2>マウスを乗せてください</h2>
<p>見出しにマウスが乗ると文字が強調されます。</p>
$(“h2”).hover(function(){
    $(“p”).css({“font-size”:”120%”,”color”:”red”});
},function(){
    $(“p”).css({“font-size”:””,”color”:””});
});

まとめ

jQueryでCSSを操作することは頻繁にあります。そのため、CSSメソッドは使いこなせるようにすることをおすすめします。動的なWebサイトを作るでは見た目の変化によって文章や画像に目を向けてもらいます。そのため、自由に操作できるようになるまで練習するのがいいと思います。

また、表示、非表示の切り替えは頻繁に使われます。しかし、CSSメソッドでは一方向の一回限りになります。複数回の切り替えを行う場合はtoggleというメソッドを使います。CSSメソッドと同時に覚えておくことをおすすめします。

toggleメソッドは下記のページでも解説しているので、参考にしてください。