jQueryを使って要素の背景に色をつける方法についてです。

要素の背景の色を変更するのはCSSだけではなく、jQueryでも可能になっています。

jQueryを使った背景色変更方法を覚えればできることの幅が広がります。

divの背景に色を付ける

<div class="sample1">test</div>

<script type="text/javascript">
$(function(){
$('.sample1').css('background-color','orange');
});
</script>

divの背景がオレンジになりました。

ul li の背景に色を付ける

<ul class="sample2">
	<li>東京</li>
	<li>埼玉</li>
	<li>千葉</li>
	<li>神奈川</li>
</ul>

<script type="text/javascript">
$(function(){
$('.sample2>li').css('background-color','orange');
});
</script>

• 東京
• 埼玉
• 千葉
• 神奈川

リストの最初と最後の項目の背景に色を付ける

<ul class="sample3">
	<li>東京</li>
	<li>埼玉</li>
	<li>千葉</li>
	<li>神奈川</li>
</ul>

<script type="text/javascript">
$(function(){
$('.sample3>li:first').css('background-color','yellow');
$('.sample3>li:last').css('background-color','green');
});
</script>

• 東京
• 埼玉
• 千葉
• 神奈川

リストを偶数・奇数で色分け

今度はリストの項目の背景色を偶数・奇数で変えて表示してみます。
偶数・奇数は even odd というフィルターを使います。

<ul class="sample4">
	<li>東京</li>
	<li>埼玉</li>
	<li>千葉</li>
	<li>神奈川</li>
</ul>

<script type="text/javascript">
$(function(){
$('.sample4>li:even').css('background-color','yellow');
$('.sample4>li:odd').css('background-color','orenge');
});
</script>

• 東京
• 埼玉
• 千葉
• 神奈川

リストのn番目の要素に背景色を設定

<ul class="sample5">
	<li>東京</li>
	<li>埼玉</li>
	<li>千葉</li>
	<li>神奈川</li>
</ul>

<script type="text/javascript">
$(function(){
$('.sample5>li:eq(2)').css('background-color','yellow');
});
</script>

• 東京
• 埼玉
• 千葉
• 神奈川