Greensleeves 2.0 / Archive / Javascript

Javascript を書く際、CSS のセレクタを使って要素を取得できると色々と楽です。このようなことを実現できるライブラリは、prototype.js の $$() メソッド等があるわけですが、特に cssQuery() は CSS3 の Stractural pseudo-class も大体使えるので結構面白いんじゃないかと思って試しにつかってみました。

実際に使ってみる

XHTML

<ul id="test">
   <li>1st element</li>
   <li>2nd element</li>
   <li>3rd element</li>
   <li>4th element</li>
   <li>5th element</li>
   <li>6th element</li>
</ul>

CSS

ul#test li {
   margin: 0 0 1em;
   padding: 1em;
   border: 1px solid #ccc;
   list-style: none;
}

たとえば上記のような XHTML と CSS があったとして、偶数番目の li 要素だけ文字色を #ffcc00、背景を #777777 に変えたい場合

window.onload = function () {
   var elements = cssQuery('ul#test > li:nth-child(even)')

   for(var i=0; i < elements.length; i++){
      elements[i].style.color = "#ffcc00";
      elements[i].style.backgroundColor = "#777777";
   }	
}

• サンプル: CSS のセレクタを使って要素を取得できる Javascript ライブラリ cssQuery() を使ってみる

このやり方は応用して色々別のところで使えそう（例えばコメント欄の奇数偶数でスタイルを微妙に変えてみたりとかよく見ますね）ですし、CSS3 のセレクタをどうしても使いたい場合に重宝するんじゃないでしょうか。とはいえ Javascript を切られたらそれでお仕舞いなので、簡単なスタイル程度で留めておいたほうがいいとは思いますが。