西尾泰和のブログ

"TagTrace" is a bookmarklet to make easy to customize CSS.

Feature

• Highlight mouse-overed tag to show its bounds.
• Show the name, class and ID of mouse-overed tag in tooltip text.
• Show tag hierarchy from clicked tag to HTML tag in the bottom of the page.

How to use

Download following script, upload it and make bookmark to

javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";s.src="http://www.nishiohirokazu.org/testJS/tagTrace.js";document.body.appendChild(s)})();

Here "http://www.nishiohirokazu.org/testJS/tagTrace.js" is the position which you upload the script.

Or simply bookmark this.

The latter method use the script on my server, so it will change its behavior or stop its activity.

Known problem

• When you clicked button, link etc. its ORIGINAL function works before the tag trace. The original function must be disabled with some techniques.

Source code

colorArray=new Array();
borderArray=new Array();
currentTag = undefined;
tagTrace = 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;
		if(!tagTrace){
			tagTrace = ""
		}
		tagTrace += t.title + "\n";

		var tmp = document.createElement("div");
		tmp.innerHTML = t.title + "\n";
		document.body.appendChild(tmp);

		if(!t.parentNode){
			alert(tagTrace);
			tagTrace = undefined;
		}
	};
}

By 西尾泰和 at 2006-03-23 16:40:14 | この記事へのリンクはこちらへ(パーマリンク)
フィードバック (0) | トラックバック (0)

先日スタイルシートいじりで作った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);
	};
}

By 西尾泰和 at 2006-03-23 03:33:27 | この記事へのリンクはこちらへ(パーマリンク)
フィードバック (0) | トラックバック (0)