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

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

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

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

divの背景に色を付ける

XHTML

jQuery

表示結果
test

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

ul li の背景に色を付ける

XHTML

jQuery

表示結果
  • 東京
  • 埼玉
  • 千葉
  • 神奈川

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

XHTML

jQuery

表示結果
  • 東京
  • 埼玉
  • 千葉
  • 神奈川

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

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

XHTML

jQuery

表示結果
  • 東京
  • 埼玉
  • 千葉
  • 神奈川

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

XHTML

jQuery

表示結果
  • 東京
  • 埼玉
  • 千葉
  • 神奈川


Author: webmaster