Greensleeves v2.0 / Tag: Javascript
Notes about things I'm interested in.
Tag: Javascript が付けられているエントリーが 2 件見つかりました。
今までビビッと来たデザインのサイトの色を調べるとき Opera にはカラーピッカーがないもんで、Firefox を立ち上げて調べてたんですが、一々見つけるたびに起動するのもなんだかなぁと思ってるときに見つけたサイトをご紹介。
There is a form at the bottom of this page that lets you choose any URL you want to extract colors from. The colors you see here are from the site that referred you to this page!
このサイトは参照元のサイトの HTML/CSS に記載されたカラーコードを拾ってきてくれます。もちろんフォームに URL を入れれば任意のサイトのカラーコードを調べることも可能。
しかし、@import 規則で参照されてる CSS に関してはチェックできないみたいです。当サイトでは外部 CSS(import.css) で @import 規則を使って、分割した CSS を読み込んでるので CSS のカラーコードは取得できません。残念でした。
Bookmarklet
Bookmarklet があればより効率的にチェックすることができます。簡単な奴ですが作ってみました。Firefox、Opera で動作します。IE、 Firefox、 Opera で動作確認しました。
Firefox なら Web Developer 等の拡張でもチェックできるみたいですが IE や Opera で済ます場合だとこれが一番の方法かなとか思ったりしました。
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";
}
}
このやり方は応用して色々別のところで使えそう（例えばコメント欄の奇数偶数でスタイルを微妙に変えてみたりとかよく見ますね）ですし、CSS3 のセレクタをどうしても使いたい場合に重宝するんじゃないでしょうか。とはいえ Javascript を切られたらそれでお仕舞いなので、簡単なスタイル程度で留めておいたほうがいいとは思いますが。