jQueryの勉強を引き続き実施。今回はクラスを追加する『.addClass()』メソッドとクラスを削除する『.removeClass()』を使って実装。ページを表示したときにクラスで指定したスタイル適用させ、ボタンをクリックしたときにクラスで指定したスタイルのオン・オフが切替られるものに仕上げたので備忘録。
今回はスマホのアプリやwebサイトの背景色を変更するイメージです。
※jQueryの勉強をしつつ見た目はいい感じにしたかったので、Bootstrap を使用しています。
今回の内容
STEP1.ページを表示したときにクラスを追加して背景色を入れる。
↓
STEP2.ボタンをクリックしたときにクラスの追加・削除で背景色を変更する。
STEP1-1. 画面を作成する
まずは、クラスが追加されて背景色が変わる部分を作ります。
クラスを追加する部分はdivで囲み、クラスをつけます。
そして、divで囲った部分にはidを付与しておきます。
今回は、一時的なものなのでcssもhtmlファイル内に書いていきます。
以下、htmlファイルの中身です。
・・・・・cssの部分です・・・・・ <style> body{ font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif; } h1{ font-weight: bold; padding-left: 5px; } .backcolor1{ background-color: #80DEEA; } .b-c p{ background-color: #FFFFFF; border-radius: 5px; padding: 10px; margin-bottom: 20px; } #colorbtn,#clearbtn:focus{ outline: none; } </style> ・・・・・省略。htmlの部分です・・・・・ <div class="container"> <div class="row" id="p-color"> <div class="col-sm-12 b-c"> <h1>見出し</h1> <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br></p> <h1>見出し</h1> <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br> ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> </div> </div> </div>
ここまでだと、以下の画像みたいになっていると思います。↓
続いて、jQueryは別ファイルに記述することが多いのでhtmlファイルからjsファイルを参照するようにします。今回はjsファイルの名前を「sample.js」として、以下をbodyの閉じタグ前に記述します。
・・・・・省略・・・・・ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="sample.js"></script> </body>
STEP1-2. jQueryでページを表示したときにクラスを追加して背景色を入れる
jQueryでページを表示したときにクラスを追加してスタイルを適用させます。
さっそく『.addClass()』メソッドを使用します。今回は水色っぽい色を背景色として表示します。
以下の内容を「sample.js」に記述します。
//クラスを追加する。 $(function(){ $('#p-color').addClass('backcolor1'); });
どうですか?
以下の画像みたいに背景色が表示されていたらOKです。
※背景色が表示されない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
STEP2-1. ボタンを作成する
続いてSTEP1-1で作ったテキスト部分の下にボタンを追加します。
ボタンはひとまず「変更」と「クリア」の2つをつくります。ボタンにはそれぞれidを付与します。
「変更」ボタンをクリックしたときはクラスを追加し、「クリア」ボタンをクリックしたときはクラスを削除する動作にします。
以下、divで囲った部分の下に追記します。
・・・・・省略・・・・・ <br> <button class="btn btn-defult" id="colorbtn">変更</button> <button class="btn btn-defult" id="clearbtn">クリア</button>
STEP2-2. jQueryでボタンをクリックしたときにクラスの追加・削除で背景色を変更する
jQueryでボタンをクリックしたときにクラスの追加・削除で背景色を変更させます。
追加は『.addClass()』メソッド、削除は『.removeClass()』を使用します。
以下の内容を「sample.js」に記述します。
//ボタンクリック時にクラスを追加する。 $(function(){ $('#colorbtn').click(function(){ $('#p-color').addClass('backcolor1'); }); $('#clearbtn').click(function(){ $('#p-color').removeClass('backcolor1'); }); });
どうですか?
背景色のオン・オフができていたらOKです。
※背景色が切り替わらない場合は、F12からDeveloper Toolsを開き、Consoleタブでエラーが出ていないか確認してみてください。
今回の動作確認用にデモサイト準備しました。
よかったら画像をクリックして確認してみてください。↓