[jQuery] 背景の色を変更する方法

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

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

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

Contents

1 divの背景に色を付ける
2 ul li の背景に色を付ける
3 リストの最初と最後の項目の背景に色を付ける
4 リストを偶数・奇数で色分け
5 リストのn番目の要素に背景色を設定

divの背景に色を付ける

XHTML

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

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

jQuery

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

$(function(){

$('.sample1').css('background-color','orange');

});

</script>

表示結果

test

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

ul li の背景に色を付ける

XHTML

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

</ul>

jQuery

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

$(function(){

$('.sample2>li').css('background-color','orange');

});

</script>

表示結果

東京
埼玉
千葉
神奈川

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

XHTML

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

</ul>

jQuery

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

$(function(){

$('.sample3>li:first').css('background-color','yellow');

$('.sample3>li:last').css('background-color','green');

});

</script>

表示結果

東京
埼玉
千葉
神奈川

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

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

XHTML

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

</ul>

jQuery

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

$(function(){

$('.sample4>li:even').css('background-color','yellow');

$('.sample4>li:odd').css('background-color','orenge');

});

</script>

表示結果

東京
埼玉
千葉
神奈川

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

XHTML

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

</ul>

jQuery

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

$(function(){

$('.sample5>li:eq(2)').css('background-color','yellow');

});

</script>

表示結果

東京
埼玉
千葉
神奈川

SearchLight