jqueryを使ってCSSスタイルを追加・変更させる方法について
jquery(javascript)により要素へのCSSクラスの追加変更、プロパティ単位での追加変更ができます。
プロパティは複数の追加や変更・削除が可能です。
CSSファイル自体をjqueryで差替える事もできます。色合いを変えた複数のスタイルを切り替える場合に便利です。
javascriptによるCSSスタイルを追加・変更
CSSはCSS専用ファイルを読み込むか、直接HTMLソース内に記述してデザインしますよね。
しかし何らかの動作時にCSSのデザインを変えたり変化を付けたいという場合があります。
ボタンを押すとコンテンツの色が変わるなどがその代表的でしょう。
本記事ではjQueryを使って、CSSスタイルを動的に変更する方法をご紹介します。
jQueryとは
jQueryは、JavaScriptコードをより簡単に記述できるようにするため設計されたJavaScriptライブラリの一つです。
JavaScriptのみでコード構成すると複雑化してしまう内容を簡素化できる設計になっています。
利用するためには、jquery.js(自分のファイル、或いはWEB上の外部ファイル)を読み込んでおきます。
外部ソースを読み込む場合
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
ヘッダーかフッターで読み込んでおくと、ライブラリが有効になります。
jqueryメソッドの書き方(CSSクラス編)
まずはあらかじめCSSファイルに設定したclass名を、条件に応じて要素に追加・変更する場合です。
CSSファイルにクラス名を付けてスタイル定義をしておきましょう。
要素へのCSSクラス名の追加・削除
指定された要素に対して、一括でクラス名の追加、またはクラス名の削除ができます。
要素にClassを追加
$("p").addClass("クラス名");
例えば全てのp要素に対してcssクラスを追加したい場合は、addClassメソッドを使います。
要素のClassを削除
$("h2").removeClass("クラス名");
例えばh2要素についたクラス名を一括削除したい場合は、removeClassメソッドを使います。
特定要素へのcssクラス名の追加・削除
全てではなく指定された要素に対してのみ、クラス名を追加・削除します。
指定要素へのcssクラス追加
$("#area").addClass("st");
addClassを使う事で「area」のIDがついた要素に対し「st」クラスが追加されます。
指定要素のcssクラス削除
$("#area").removeClass("st");
removeClassメソッドにより、「area」のIDが付いた要素の「st」クラスが削除され無効になります。
jqueryメソッドの書き方(CSSプロパティ編)
今度は、CSSにclass名で設定された「プロパティ欄」の追加や削除の方法です。
クラス名単位だけでなく、プロパティ単位での操作もできます。
要素へのCSSプロパティの直接追加
styleのプロパティを直接追加したい場合は、cssメソッドを使います。
一つのプロパティを追加する場合
$("h1").css("プロパティ","値");
このようにh1タグにプロパティを追加する事ができます。
複数のプロパティを追加する場合
$("div").css({"プロパティ":"値","プロパティ":"値"});
上記の様に複数のプロパティを追加する事ができます。
クラス名の有無に関係なく、h1タグやdivタグなど指定された要素に対してそのプロパティ設定が反映されます。
CSSクラス名へのプロパティの追加、変更、削除
次は要素に対してではなく、CSSファイルに設定済みのクラス名に対して新たにプロパティを操作します。
クラス名へプロパティを追加・変更する場合
$(".st").css("color","blue");
これで元々.stクラスにcolorのスタイルが設定されていても、強制的にblueになります。
複数プロパティを追加・変更する場合
$("#area").css({"color":"blue","font-size":"20px"});
上記の様に複数設定の場合は前後を{}で囲みます。
そうすればプロパティをいくつでも上書き(追加)する事ができる訳です。
cssプロパティを削除(無効)する場合
$(".test").css("color":"");
上記の様に""で空欄を作る事で、元々指定されたプロパティが無効の状態になります。
jquery・CSS実装サンプル
では実際にjqueryとCSSで動的に動くサンプルをご紹介します。
今回はボタンを押すタイミングで、既に設定済みのスタイルプロパティを上書き操作するサンプルをご紹介します。
ソースサンプル
まずはヘッダーでjqueryを読み込んでおきましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
これがないとそもそも動きませんので、必ず入れましょう。
HTMLソース
<div id="box1">ボックス1</div> <input type="button" id="button1" value="ボタン1"> <input type="button" id="button2" value="ボタン2">
CSS
box1にあらかじめ設定されているCSSスタイルが以下です。
#box1{ padding: 20px; width: 130px; border:1px solid #000; text-align:center; font-size:16px; }
これはCSS外部ファイルに設定、或いはヘッダーに直接記述のどちらでもOKです。
jqueryコード
ヘッダーで以下の様にコードを入れます。
<script> $(function() { // ボタン1 (背景色を黄色に、文字サイズを12pxに指定) $("#button1").click(function() { $("#box1").css({"background-color":"#cc0000", "font-size":"12px"}); }); // ボタン2 (背景色を消し、文字サイズを通常状態に) $("#button2").click(function() { $("#box1").css({"background-color":"", "font-size":""}); }); }); </script>
それぞれ、$("ID属性").click(function());を使っています。
ボタン2では、ボタン1で追加したプロパティと同じものを指定して空欄にしています。
そうすればボタン2を押した時に元のCSSスタイルに戻れる訳です。
サンプル例
ボタン1を押すとjqueryで設定されたプロパティが適用され、ボタン2を押すと元々のスタイルに戻ります。
背景色が赤くなり、文字が小さくなるのがわかりますね。
CSSファイル自体を置き換える
次のサンプルは、何らかの動作を条件としてスタイルシート自体を別のファイルに変更します。
基本的にヘッダーで読み込むCSSファイルは固定していますよね。
これがボタンクリックなどの条件によって、別のCSSファイルに置き換わります。
この時同じクラス名でプロパティ値が違うCSSファイルを用意しておきます。
これまで紹介した様にjqueryメソッドを書いてCSSのクラスやプロパティを追加するよりも簡単な場合が出てきます。
色違いの個別CSSでWEBサイトのカラーチェンジ
例えばテキストや見出し・アイコンの色だけを変更した複数のCSSを用意しておきます。
そしてボタンを押す事で自在にCSSが変更できる訳ですね。
WEBサイトではあまり使っているところはありませんが、面白いギミックになると思います。
ソースサンプル
HTMLソース
<h4>スタイルシート変更ボタン</h4> <button id="preset1" class="btn btn-sm btn-primary"></button> <button id="preset2" class="btn btn-sm btn-primary"></button> <button id="preset3" class="btn btn-sm btn-primary"></button> <h5>ロゴマーク画像をCSSで変更</h5> <div class="navbar-brand"> <a><div class="logo1"></div></a> </div>
#preset1~3のID属性を付けているところがポイントです。
CSSファイルが切り替わる事で、下のロゴマークの画像が変わります。
読込CSS
<link id="style-switch" href="css/presets/preset1.css" media="screen" rel="stylesheet" type="text/css">
id="style-switch"属性を付けているところに注意しましょう。この属性がトリガーになります。
初期状態ではpreset1.cssが読み込まれています。
これが別途用意したprreset2.cssやpreset3.cssに置き換わる訳です。
preset1.cssスタイル
/* Logo */ .logo1{ width: 215px; height: 50px; background-image: url(../../images/logo1.png); }
通常状態のpreset1.cssではlogo1.pngが読み込まれます。
preset2.cssスタイル
/* Logo */ .logo1{ width: 215px; height: 50px; background-image: url(../../images/logo2.png); }
ロゴのタグ部分のlogo1クラス名は変わらないまま、preset2.cssではlogo2.pngが読み込まれます。
jqueryコード
<script> jQuery(document).ready(function($) { // Color Changer $("#preset1" ).click(function(){ $("#style-switch").attr("href", "css/presets/preset1.css" ); return false; }); $("#preset2" ).click(function(){ $("#style-switch").attr("href", "css/presets/preset2.css" ); return false; }); $("#preset3" ).click(function(){ $("#style-switch").attr("href", "css/presets/preset3.css" ); return false; }); }); </script>
ID属性のついたボタンを押した時に、attr()メソッドでcssファイルの読込先を変更しています。
CSSファイル置き換えサンプル例
スタイルシート変更ボタン
クリックして下さい。
ボタンを押すごとにロゴマーク画像が切り替わります。