
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>
表示結果
- 東京
- 埼玉
- 千葉
- 神奈川