I quite like my following Bookmarklet to display element information while moving the mouse over a web page - see screenshot. Create a Bookmark or Favorite in your browser and paste the code as the Location (or url). Then when viewing a page, click it from your Bookmarks toolbar and point at different elements of the page to display information. Click elements to make the information stick, and press the Escape key when done. Refreshing the page will clear the sticky details.
I know there are many versions of this available already, but they tend to be a little slow to initiate. Enjoy
Code: Select all
javascript:(function(){var%20d=document,useMine=true,prevEl,info;function%20addHandler(orig,mine){return%20function(e){if(useMine){mine(e);}else%20if(orig){orig(e);}};}function%20GS(el,sRule){var%20result='';if(d.defaultView&&d.defaultView.getComputedStyle){result=d.defaultView.getComputedStyle(el,'').getPropertyValue(sRule);}else%20if(el.currentStyle){sRule=sRule.replace(/\-(\w)/g,function%20(strMatch,p1){return%20p1.toUpperCase();});result=el.currentStyle[sRule];}else{result='n/a';}return%20sRule+':%20'+result;}function%20myover(e){var%20el=e?e.target:window.event.srcElement;el.style.outline='1px%20solid%20red';var%20sInfo=el.nodeName;if(el.id)sInfo+="%20ID:%20"+el.id;sInfo+="\n";if(el.className)sInfo+="Class:%20"+el.className+"\n";sInfo+=GS(el,'width')+"%20"+GS(el,'height');sInfo+="\n"+GS(el,'padding');sInfo+="\n"+GS(el,'border');sInfo+="\n"+GS(el,'margin');sInfo+="\n"+GS(el,'display');sInfo+="\n"+GS(el,'position');sInfo+="\n"+GS(el,'font');sInfo+="\n"+GS(el,'float');sInfo+="%20"+GS(el,'z-index');info.value=sInfo;prevEl=el;}function%20myout(e){var%20el=e?e.target:window.event.srcElement;if(!el.keepOl)el.style.outline='';}function%20mymove(e){var%20evt=e||window.event;var%20el=evt.target||evt.srcElement;info.style.left=parseInt(evt.pageX)+20+"px";info.style.top=parseInt(evt.pageY)+10+"px";}function%20myclick(e){var%20evt=e||window.event;var%20el=evt.target||evt.srcElement;info.style.left=parseInt(evt.pageX)+4+"px";info.style.top=parseInt(evt.pageY)+4+"px";el.keepOl=true;createBox();if(el.href){var%20temp=el.href;el.href="#";window.setTimeout(function%20(){el.href=temp;},20);}evt.preventDefault;return%20false;}function%20mydown(e){var%20evt=e||window.event;if(evt.keyCode==27){if(!prevEl.keepOl)prevEl.style.outline='';useMine=false;info.parentNode.removeChild(info);}}function%20createBox(){info=d.createElement('textarea');info.style.position="absolute";info.style.width="250px";info.style.height="170px";info.style.zIndex="999";info.style.fontSize="11px";info.style.color="black";info.style.backgroundColor="lightyellow";info.style.paddingLeft="3px";d.body.appendChild(info);}d.onmouseover=addHandler(d.onmouseover,myover);d.onmouseout=addHandler(d.onmouseout,myout);d.onmousemove=addHandler(d.onmousemove,mymove);d.onclick=addHandler(d.onclick,myclick);d.onkeydown=addHandler(d.onkeydown,mydown);createBox();})()Code: Select all
javascript:
(function(){
var d=document,useMine=true,prevEl,info;
function addHandler(orig,mine){
return function(e){
if(useMine){
mine(e);
}
else if(orig){
orig(e);
}
}
;
}
function GS(el,sRule){
var result='';
if(d.defaultView&&d.defaultView.getComputedStyle){
result=d.defaultView.getComputedStyle(el,'').getPropertyValue(sRule);
}
else if(el.currentStyle){
sRule=sRule.replace(/\-(\w)/g,function (strMatch,p1){return p1.toUpperCase();});
result=el.currentStyle[sRule];
}
else{
result='n/a';
}
return sRule+': '+result;
}
function myover(e){
var el=e?e.target:window.event.srcElement;
el.style.outline='1px solid red';
var sInfo=el.nodeName;
if(el.id)
sInfo+=" ID: "+el.id;
sInfo+="\n";
if(el.className)
sInfo+="Class: "+el.className+"\n";
sInfo+=GS(el,'width')+" "+GS(el,'height');
sInfo+="\n"+GS(el,'padding');
sInfo+="\n"+GS(el,'border');
sInfo+="\n"+GS(el,'margin');
sInfo+="\n"+GS(el,'display');
sInfo+="\n"+GS(el,'position');
sInfo+="\n"+GS(el,'font');
sInfo+="\n"+GS(el,'float');
sInfo+=" "+GS(el,'z-index');
info.value=sInfo;
prevEl=el;
}
function myout(e){
var el=e?e.target:window.event.srcElement;
if(!el.keepOl)
el.style.outline='';
}
function mymove(e){
var evt=e||window.event;
var el=evt.target||evt.srcElement;
info.style.left=parseInt(evt.pageX)+20+"px";
info.style.top=parseInt(evt.pageY)+10+"px";
}
function myclick(e){
var evt=e||window.event;
var el=evt.target||evt.srcElement;
info.style.left=parseInt(evt.pageX)+4+"px";
info.style.top=parseInt(evt.pageY)+4+"px";
el.keepOl=true;
createBox();
if(el.href){
var temp=el.href;
el.href="#";
window.setTimeout(function (){el.href=temp;},20);
}
evt.preventDefault;
return false;
}
function mydown(e){
var evt=e||window.event;
if(evt.keyCode==27){
if(!prevEl.keepOl)
prevEl.style.outline='';
useMine=false;
info.parentNode.removeChild(info);
}
}
function createBox(){
info=d.createElement('textarea');
info.style.position="absolute";
info.style.width="250px";
info.style.height="170px";
info.style.zIndex="999";
info.style.fontSize="11px";
info.style.color="black";
info.style.backgroundColor="lightyellow";
info.style.paddingLeft="3px";
d.body.appendChild(info);
}
d.onmouseover=addHandler(d.onmouseover,myover);
d.onmouseout=addHandler(d.onmouseout,myout);
d.onmousemove=addHandler(d.onmousemove,mymove);
d.onclick=addHandler(d.onclick,myclick);
d.onkeydown=addHandler(d.onkeydown,mydown);
createBox();
}
)()
