西尾泰和のブログ

先日スタイルシートいじりで作ったBookmarkletを公開します。JavaScriptは1ヶ月前にBookmarkletのおもしろさを知って始めたばかりで、まだまともな文法書も読んだことがないので、いろいろとまずいところもあるかと思います。お気づきの点があれば、ご指摘いただけましたら幸いです。

機能

• マウスオーバーしたタグのスタイルを一時的に変更してどの範囲がそのタグかわかりやすくする。
• マウスオーバーしたタグの種類とクラス、IDをツールチップテキストで表示する。
• マウスクリックでそのタグを起点に、親のタグを順番にたどってページ末尾に表示する。

使い方

下記のスクリプトを適当な名前で適当なサーバにアップロードし、 「bookmarkletの文字数制限を無くす」を参考にしてそのスクリプトを呼び出すブックマークレットを作る。 もしくはこちらのリンクをブックマークに追加する。 後者の方法ではこのサーバに置かれたJavaScriptを呼び出すので、今後挙動が変化したり、使えなくなったりする可能性があります。

既知の問題点

• ボタン、リンクなどをクリックした場合は「本来の挙動」が動いてしまう。何らかの方法で無効化する必要がある。

ソースコード

colorArray=new Array();
borderArray=new Array();
currentTag = undefined;

tags = document.getElementsByTagName('*');
for(i = 0; i < tags.length; i++){
	tag = tags[i];
	t = tag.tagName;
	if(tag.className != ""){
		t += "." + tag.className;
	}
	if(tag.id != ""){
		t += "#" + tag.id;
	}
	tag.title = t;
	
	tag.onmouseover=function(){
		if(currentTag){
			return;
		}
		currentTag = this;
		t=this;
		colorArray[t]=t.style.background;
		borderArray[t]=t.style.border;
		t.style.background='#DAFADA';
		t.style.border='solid';
	};
	tag.onmouseout = function(){
		t=this;
		t.style.background=colorArray[t];
		t.style.border=borderArray[t];
		currentTag = undefined;
	};
	tag.onclick = function(){
		t = this;
		var tmp = document.createElement("div");
		tmp.innerHTML = t.title + "\n";
		document.body.appendChild(tmp);
	};
}