jQueryでCSSのスタイルを変更する方法

.NET開発者のためのブログメディア

Webアプリケーションの見栄えを良くするために使われるCSS。CSSファイルを別に作成して読み込むという方法が一般的ですが、実はjQueryでもCSSを直書きが可能です。
この記事では、サンプルコードを例に挙げながらjQueryでCSSのスタイルを変更する方法をご紹介したいと思います。参考になれば幸いです。

SE: jQueryでCSSが書けるんですか？知らなかったです！

PM: しかもコードはとっても簡単です。すぐに覚えて使うことができますよ！

簡単にjQueryでCSSのスタイルを変更する方法

jQueryでCSSのスタイルを変更するためには、CSSメソッドを使います。
書き方は以下のとおりです。

★適用するCSSが一つの場合
$(‘要素’).css(‘プロパティ’, ‘値’);

★適用するCSSが複数の場合
$(‘要素’).css({‘プロパティ’:’値’, ‘プロパティ’:’値’});

コードに記載することはこれだけです。
では、実際のサンプルコードも見ていきましょう。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!--ボタンを配置-->
<div id="btn" style="background-color : gray; padding : 20px;">
	<input type="button" id="btn1" value="青">
	<input type="button" id="btn2" value="黄">
	<input type="button" id="btn3" value="赤">
	<input type="button" id="btn0" value="リセット">
</div>

<!--jQueryのcssメソッドで装飾-->
<script type="text/javascript">
$(function(){
	// デフォルトの背景色をグレーに設定
	$("#btn0").click(function() {
		$("#btn").css("background-color","gray");
	});
	// 背景を青色に変更
	$("#btn1").click(function() {
		$("#btn").css("background-color","blue");
	});
	// 背景を黄色に変更
	$("#btn2").click(function() {
		$("#btn").css("background-color","yellow");
	});
	// 背景を赤色に変更
	$("#btn3").click(function() {
		$("#btn").css("background-color","red");
	});
});
</script>

</div>

$(function(){

// デフォルトの背景色をグレーに設定

$("#btn0").click(function() {

$("#btn").css("background-color","gray");

});

// 背景を青色に変更

$("#btn1").click(function() {

$("#btn").css("background-color","blue");

});

// 背景を黄色に変更

$("#btn2").click(function() {

$("#btn").css("background-color","yellow");

});

// 背景を赤色に変更

$("#btn3").click(function() {

$("#btn").css("background-color","red");

});

</script>

上記のサンプルコードでは、はじめにHTMLで信号機のようなボタンを作り、jQueryでCSSを適用できるよう、それぞれにidを追加しています。

そしてその下部で、ボタンが押されたら背景の色が変わるCSS（onclick）を適用しています。では、それぞれの結果も見ていきましょう。

「リセット」を押した場合は背景をグレーに変更

「青」を押した場合は背景を青色に変更

「黄」を押した場合は背景を黄色に変更

「赤」を押した場合は背景を赤色に変更

↑しっかりと適用されています。

jQueryとCSSファイルはどちらがおすすめか

前項で、jQueryでCSSのスタイルを変更する方法をご紹介しましたが、「CSSファイルにまとめて読み込むのと何が違うの？」と疑問に感じている方もいるかと思います。

結論から申し上げますと、適用するスタイルの量で使い分けるのが良いかと思います。
例えば、プログラムが小さくほんの少ししかCSSスタイルを適用しない場合、わざわざCSSファイルにまとめて読み込んで…というのは手間です。その際は、jQueryのCSSメソッドを用いてスタイルを適用したいファイルに直書きするのがおすすめです。

対して、作成プログラムが大きく複数ページに渡って同じスタイルを適用する場合は、CSSファイルにまとめて管理する方がおすすめです。