CodeWeb

最近CSSの見直しをして色々新しい発見をするので今日もエントリーします。 ID、class、属性名には個別のポイントが設定されていてその合計値が高いものから優先されていきます。

その件について詳しく書く前に基本のおさらい。 スタイルシートは下に書いてあるものほど優先されます。 普通は外部スタイルの読込を一番最初して、次にHEADの中にスタイルを書き、タグに直書きするので、
タグ内スタイル＞HEAD内スタイル＞外部スタイル
の順で優先されると思います。（今回はユーザースタイル、ブラウザスタイル、!importantについては一先ず置いておきます。）
今までは一番最後に読込んだスタイルが適用されるって思い込んでたのですが、どうもそうではないらしい。 いや、うすうすは感ずいていたんですよ、なんかID付の属性が優先されてるなぁーって。

はい、ここから本題です。
id 100ポイント
class 10ポイント
属性名 1ポイント
はい、本題終了。

こういう計算でなりたってます。例を書くとこんな感じ。

/*こっちの方が優先されます。*/
#left p.contents a{
  color:#F00;
  font-size:0.8em;
}

/*こっちは無視されます*/
#left p a{
  color:#aaa;
  font-size:2em;
}

以上です。そんだけです。 そろそろムーバブルタイプに引っ越そうかなぁ。

知ってる人には当たり前の事かも知れないけど、知らなかったので「へぇ〜」って思った。だからエントリーしてみる。

classは半角スペースで区切る事により複数設定できる、具体的に書くと「class="p1 p2 p3"」とこんな感じ。スタイル内のセレクタをカンマ区切りで複数指定してグループ化はよく使ってるけど、これは使った事なかった。
今の所、特に使う予定はないけど。

bodyの中からイベントハンドラをなくす(Mozilla)

さて、ここからが本題です。HTMLソースからイベントハンドラをなくします。尚サンプルはFireFoxとかじゃないと動きません。IE非対応。

で、onclickさんがどっかいっています。どこにいったかというと、
document.getElementById("button3").addEventListener("click",test3,false);
この行にいます。addEventListenerというのがイベントハンドラの変わりになるものです。
オブジェクト.addEventListener(イベント,関数,false)ってなかんじで書くと制御できるんですが、これだとHEADの中に書いても下のソースが読み込む前に実行されるのでエラーがおきてしまいます。なのでこの一文が入ります。
window.addEventListener("load",setTest3,false);
これでwindowがロードされてから実行されることになります。記述するときに注意してもらいたいのはイベントにonがつかないという事です。onclickならclickになります。

サンプル

ソース

<script type="text/javascript">
<!--
function setTest3(){
	document.getElementById("button3").addEventListener("click",test3,false);
}
function test3(){
	document.getElementById("textarea3").value = document.getElementById("text3").value;
}
window.addEventListener("load",setTest3,false);
//-->
</script>
<form>
	<input id="text3" type="text" value="codeweb" /><br />
	<textarea id="textarea3"></textarea><br />
	<input id="button3" type="button" value="クリック" />
</form>

bodyの中からイベントハンドラをなくす(IE)

サンプルはIEじゃないと動きません。

やっぱりIEで動かないと使いものになりません。IEではaddEventListenerの代わりにattachEventを使います。今度はイベントにonがついてるので注意してください。

サンプル

ソース

<script type="text/javascript">
<!--
function setTest4(){
	document.getElementById("button4").attachEvent("onclick",test4);
}
function test4(){
	document.getElementById("textarea4").value = document.getElementById("text4").value;
}
window.attachEvent("onload",setTest4);
//-->
</script>
<form>
	<input id="text4" type="text" value="codeweb" /><br />
	<textarea id="textarea4"></textarea><br />
	<input id="button4" type="button" value="クリック" />
</form>

結局最後はprototype-js

こうなるとやっぱしクロスブラウザ用の関数を作りたくなるのが人というものです。ではここで専用の関数を作ってみます・・・と言いたい所ですが、わざわざ自分で作らなくても既に世の中には優秀なものが出来ています。
この一連の作業をprototype-jsを使って書くとこうなります。実に簡単でシンプルに出来ます。
Event.observe("button5", "click", test5, false);
ここがイベントハンドラの変わりになっています。button5はオブジェクトのIDですが、ここにはID以外にもwindowのようなオブジェクトを指定することもできます。
ビバ！prototype-js！

サンプル

このブログに載せたら文字コードが違うので動きませんでした。別ページ用意するのがめんどくさいのでソースだけ載せときます。

ソース

<script type="text/javascript" src="/js/prototype-1.4.0.js"></script>
<script type="text/javascript">
<!--
function setTest5(){
	Event.observe("button5", "click", test5, false);
}
function test5(){
	$("textarea5").value = $F("text5");
}
Event.observe(window, "load", setTest5, false);
//->
</script>
<form>
	<input id="text5" type="text" value="codeweb" /><br />
	<textarea id="textarea5"></textarea><br />
	<input id="button5" type="button" value="クリック" />
</form>

久しぶりに更新したら疲れました。
例によって適当に書いてる所が多々あるので必ずコメント欄にツッコミがないかどうか確認していってください。
関係ないけど、近いうちにダイハツのエッセ買います。
そのまえにニートになりそうだけど…。

参考

• helma api / Browser
• prototype.js v1.3.1 の使い方
• Gecko DOM リファレンス
• DOM Reference