かわたま.net

Enjoy Creative! かわたまのwebメモ

jQueryで特定の要素にcssやcssプロパティを追加/変更/削除する記述方法

2015 January 24

Tag:

jQueryで特定のHTML要素にcssプロパティを追加/変更/削除する記述方法をメモします。
jQueryでstyle属性を直書きする場合は css( )メソッドを、cssを追加、削除する場合は addClass( ) / removeClass( )メソッドを使用します。

まずは、事前にhtml内でjQueryを読み込んでおきます。(既に記述済みの場合はいりません)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

書式

jQueryでstyle属性を直書きしたい場合は「css( )」メソッド

ひとつのstyle属性の場合
$('要素').css('プロパティ', '値');

複数のstyle属性を設定する場合
$('要素').css({'プロパティ':'値', 'プロパティ':'値'});

特定の要素にcssを追加、削除したい場合は「addClass( )」「removeClass( )」メソッド

要素にClassを追加する
$('要素').addClass('css名');
要素についているClassを削除する
$('要素').removeClass('css名');

「css( )」メソッドでstyle属性の追加、変更、削除

■ひとつのcssプロパティの場合
例えば、class「hoge」がついた要素のcss「color」を「red」に追加、変更したい場合
$('.hoge').css('color','red');
これでcssが追加されます。既にcolor指定されていた場合でも、この記述が有効になります。

■複数のcssプロパティの場合
例えば、ID「piyo」がついた要素のcss「color」を「red」に、「font-size」を「20px」に追加、変更したい場合
$('#piyo').css({'color':'red', 'font-size':'20px'});
複数のcssプロパティを追加、変更したい場合はこのように記述します。

■cssプロパティの削除
例えば、class「hoge」がついた要素のcss「color」指定を削除したい場合
$('.hoge').css('color', '');
このように値を空にすることでCSSプロパティを削除することができます。

「addClass( )」「removeClass( )」メソッドでcssの追加、削除

■cssを追加
例えば、ID「hoge」がついた要素にcss「piyo」を追加したい場合
$('#hoge').addClass('piyo');

例えば、ID「hoge」がついた要素からcss「piyo」を削除したい場合
■cssを削除
$('#hoge').removeClass('piyo');

PC表示とSP表示でcssプロパティを変えたいときなどに便利です!
jQueryを使いこなせるように、もっと勉強したいと思います^O^