divタグの外枠とidやclassを表示するブックマークレット

Javascript

IburiTimesさんのBookmarklet::FloatAlt改で

>例えばdivタグの外枠と、idやclassが表示されればXHTMLの構造理解に役立ちそうです。
>これもどなたかぜひ！

と書かれていたのを作ってみました。

  • idかclass属性のある<div>タグに色をつけます（虹のグラデーション？っぽい感じ）
  • <div>の左上にid:class名を表示するラベルをつけます。

javascript:(function(){d=document;g=d.getElementsByTagName('div');r=new Array('red','orange','yellow','green','blue','purple');for(i=0;i<g.length;i++){p=g[i];z=p.id+':'+p.className;if(z!=':'){s='1px solid ';e=r[i%6];l=t=0;p.style.border=s+e;while(p&&p.tagName!='BODY'){l+=p.offsetLeft;t+=p.offsetTop;p=p.offsetParent}d.body.insertAdjacentHTML('beforeEnd','<span style=\'left:'+l+'px;top:'+t+'px;position:absolute;background-color:white;border:'+s+e+';filter:alpha(opacity=70)\'>'+z+'</span>')}}})()