CSS3： Target 擬似クラスを実装するスクリプト sfTarget.js を（勝手に）作り直し
CSS3 の Target 擬似クラスというものを IE，Opera に実装するスクリプトです．
Target 擬似クラスについてはこちらを参考に．
# ざっくり説明しようと思ったら意外と難しかったので省きます．
# リンク先を見てちょ
CSS3 で定義されている Target擬似クラスは IE と Opera では実装されていません． 上記エントリィ内でも Javascript で実現するスクリプトが紹介されてますが，スクリプトが読みづらい＋意味不明な処理が多いので抜本的に作り直してみました．
sfTarget.js: IE，Opera に Target 擬似クラスを実装するスクリプト
JS ファイル
コメントを削ったちょい軽量版です．HTML に埋め込む際は
head 要素内に以下の１行を挿入してください．
<script type="text/javascript" src="http://akanasu.googlepages.com/sftarget.js"></script>
ソースコード
function sfTarget () {
var cls = 'sftarget'; //クラス名
if (document.location.hash) {
var id = document.location.hash.substring(1);
var elm= document.getElementById(id);
if (elm) { elm.className += ' '+cls; }
}
for (var i=0; i < document.links.length; i++) {
if (document.links[i].hash == '') { continue; }
document.links[i].attachEvent('onclick', function (event) {
//前Target要素からクラス削除
if (document.location.hash) {
var id = document.location.hash.substring(1);
var elm= document.getElementById(id);
if (elm) { elm.className = elm.className.replace(' '+cls, ''); }
}
//Traget要素にクラス追加
var id = event.srcElement.hash.substring(1);
var elm= document.getElementById(id);
if (elm) { elm.className += ' '+cls; }
});
}
}
if (window.attachEvent) { window.attachEvent('onload', sfTarget); }
CSS 指定方法に関して
因みに，CSS の指定方法としては
div.sftarget,
div:target {
/* (IE?), Opera ではここのスタイル指定は無視されます */
background: #0ff;
}
のようにグループ化して書けませんのでご注意ください．
div:target {
background: #0ff;
}
div.sftarget {
background: #0ff;
}
と，同じスタイルでも分けて記述しましょう．
理由としてはこちらの「説明」部分に詳しく説明されています．
:target が対応していないからですね．
0 comments:
Post a Comment