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

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

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

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

divの背景に色を付ける

XHTML
<div class="sample1">test</div>
jQuery
<script type="text/javascript">
$(function(){
$('.sample1').css('background-color','orange');
});
</script>
表示結果
test

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

ul li の背景に色を付ける

XHTML
<ul class="sample2">
	<li>東京</li>
	<li>埼玉</li>
	<li>千葉</li>
	<li>神奈川</li>
</ul>
jQuery
<script type="text/javascript">
$(function(){
$('.sample2>li').css('background-color','orange');
});
</script>
表示結果
  • 東京
  • 埼玉
  • 千葉
  • 神奈川

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

XHTML
<ul class="sample3">
	<li>東京</li>
	<li>埼玉</li>
	<li>千葉</li>
	<li>神奈川</li>
</ul>
jQuery
<script type="text/javascript">
$(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>
jQuery
<script type="text/javascript">
$(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>
jQuery
<script type="text/javascript">
$(function(){
$('.sample5>li:eq(2)').css('background-color','yellow');
});
</script>
表示結果
  • 東京
  • 埼玉
  • 千葉
  • 神奈川


Author: webmaster