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>