プログラミング

jQueryでCSSの変更・取得・追加・削除をする方法

jQueryでHTML要素にCSSプロパティを変更・取得・追加・削除などをする際の記述方法について紹介します。

主に覚えておきたいのは「css()メソッド」、「addClass()メソッド」、「removeClass()」です。

jQueryのCSSメソッド

jQueryでhtmlのstyle属性に直書きする場合には「css()」を使い、次のように記述します。なお、複数のプロパティを指定することも可能です。

1つのプロパティの場合

$(‘要素’).css(‘プロパティ’, ‘値’);

複数のプロパティの場合

$(‘要素’).css({‘プロパティ’:’値’, ‘プロパティ’:’値’});

jQueryのaddClassメソッド、removeClassメソッド

jQueryでclassを追加したり削除したりする場合には「addClass()」、「removeClass()」を使います。

addClass()

「addClass()」は、特定の要素にclassを追加するためのメソッドです。

$(‘要素’).addClass(‘class名’);

removeClass()

「removeClass()」は、特定の要素のclassを削除するためのメソッドです。

$(‘要素’).removeClass(‘class名’);

CSSの追加・変更をする方法

例えばpタグの文字色を赤色にしたい場合、「css()」を使って次のように記述することで、cssの「color: red;」が追加、変更されます。

$(‘p’).css(‘color’, ‘red’);

また、文字サイズも追加、変更したい場合は次のようにします。

$(‘p’).css({‘color’:’red’, ‘font-size’:’20px’});

すでにCSSで別の文字色、文字サイズが指定されていても、こちらが優先されます。

「addClass()」を使う方法だと、以下のようにclassを追加して、CSSで記述が必要になります。

jQuery
$(‘p’).addClass(‘text’);
CSS
.text {
　color: red;
　font-size: 20px;
}

jQueryで「text」というclassを追加して、CSSで文字色、文字サイズを指定しています。結果的には「css()」を使った時と同じです。

CSSの取得をする方法

要素に設定されているCSSを取得する場合は次のようにします。

HTML
<p style=”color:blue;”>Hello World;</p>
jQuery
var text = $(‘p’).css(‘color’);
console.log(text);

jQueryの「css()」を使ってpタグの文字色を取得しており、「blue」が実行結果として返されます。

CSSの削除をする方法

プロパティの削除についてですが、例えばpタグにすでに「color」が指定されている場合、jQueryの「css()」を使って次のように記述することで、プロパティを削除することができます。

HTML
<p style=”color:blue;”>Hello World;</p>
jQuery
$(‘p’).css(‘color’, ”);

また、「removeClass()」 でclassを削除することで、結果としてプロパティを削除することもできます。

HTML
<p class=”text”>Hello World;</p>
CSS
.text {
　color: blue;
}
$(‘p’).removeClass(‘text’);

「text」というclassが削除されるので、指定しているcolorプロパティも効かなくなります。

まとめ

jQueryでCSSの変更・取得・追加・削除をする場合は「css()メソッド」、「addClass()メソッド」、「removeClass()」などを使います。

なお、「click()」メソッドなどと併用して、クリックされた時にCSSを変化させたりする時に使用することも多いです。

Leave a Comment