[JS] スタイルの直接変更

タグ :

jQuery の勉強をまとめるシリーズです。
今回は「スタイルの直接変更」についてまとめます。

CSS API

jQuery で html 要素のスタイルを直接変更するには、「.css(style)」を使用します。
引数の style には、スタイルシートのプロパティとその値を指定します。
背景色だけを変更するなど、簡単な CSS の変更の場合は、わざわざクラスの追加にてスタイルを変更させなくても、直接変更させた方が簡単です。

[ 構文 ]
.css( “プロパティ”, “値” )
[ コード ]
$(function() {
	$("button").click(function() {
		$("div p").css("background-color", "blue");
	});
});

3行目の css() でスタイルの直接変更を行います。

<h4>スタイルの直接変更</h4>
<div>
	<p>ここのスタイルを変更するよ</p>
</div>
<button>変更</button>

3行目の p タグのスタイルを変更します。

<div>
	<p style="background-color: blue;">ここのスタイルを変更するよ</p>
</div>

p 要素のスタイルに直接追加されます。

ボタンクリックで div 要素内の p 要素の背景色を青に変更します。
スタイルを変更できるということは、除去も同じようにできるということになります。
記述はしませんが、スタイルをデフォルトの値に設定することで除去することは可能です。

複数のスタイルを指定

複数のスタイルを適用させたい場合は、ちょいと記述の仕方が変わります。
まずは「{}」で囲み、プロパティと値を「:」で区切って指定し、さらにプロパティ間を「,」で区切る、という記述になります。

[ 構文 ]
.css( { “プロパティ1” : “値1”, “プロパティ2” : “値2”, … } )
[ コード ]
$(function() {
	$("button").click(function() {
		$("div p").css({
			"background-color":"blue",
			"color":"red"
		});
	});
});

3行目の css() でスタイルの直接変更を行います。

<h4>スタイルの直接変更(複数)</h4>
<div>
	<p>ここのスタイルを変更するよ</p>
</div>
<button>変更</button>

3行目の p タグのスタイルを変更します。

<div>
	<p style="background-color: blue; color: red;">ここのスタイルを変更するよ</p>
</div>

p 要素のスタイルに直接追加されます。

ボタンクリックで div 要素内の p 要素の背景色を青にし、文字色を赤に変更します。

まとめ

簡単なスタイルの適用であれば、直接スタイルを変更させるのが簡単で良いと思います。
ですが、多数のスタイル変更をする場合、js ファイル内に多量の CSS コードが入る事になってしまい、後の修正性や視認性に影響が及ぶ可能性があります。というか見難いコードになるのは嫌です。

従って、自分的には簡単なスタイルの変更は直接変更し、それ以外はクラス追加によるスタイル変更をするようにしたいと思います。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed