jQueryで指定した要素のスタイルを追加・変更する場合、css()メソッドを使用します。
css()メソッドは下記のように使用します。
1 | $('要素').css('プロパティ', '値'); |
CSSプロパティを複数設定する場合は下記のように使用します。
1 | $('要素').css({'プロパティ':'値', 'プロパティ':'値'}); |
アクション時に指定した要素のスタイル変更させたいなど、色々な場面で使うことが多いと思います。
今回はjQueryのcss()メソッドを使用して、指定した要素のCSSを追加・変更する方法をメモします。
■ ボタンをクリック時、指定した要素のCSSを追加・変更
jQueryを読み込みます。
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> |
【HTML】
1 2 3 4 5 | <input type="button" id="click" value="クリック"><div id="hoge">テキスト</div> |
【JS】
・文字の色を変更する場合
1 2 3 4 5 6 7 | <script type="text/javascript">$(function(){ $("#click").click(function(){ $('#hoge').css('color', '#0000FF'); });});</script> |
・複数スタイルを追加する場合（色、フォントサイズ）
1 2 3 4 5 6 7 | <script type="text/javascript">$(function(){ $("#click").click(function(){ $('#hoge').css({'color':'#0000FF', 'font-size':'30px'}); });});</script> |
・CSSを削除する場合
値を空にするとCSSを削除することができます。
1 2 3 4 5 6 7 | <script type="text/javascript">$(function(){ $("#click").click(function(){ $('#hoge').css('color', ''); });});</script> |