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