Display Element Details

[u jayakodi]

This snippet shows the details like Tagname, type, ID, Style and Global style, when the mouse is moved over any element of a page, which need to be traced otherwise only in the source file.

The code can be added in a script block or saved as a js file and referred in the head section. A model html file in whatisit.zip demonstrates the use.

jayakodiu@yahoo.com

document.onmousemove=function(){var ele=event.srcElement;tt=ele.tagName;if(tt=="BODY"){return}
if(tt=="INPUT"){tt+="\ntype = "+ele.type}
tid=ele.id;if(tid!=""){tt+="\nid = "+tid}
tcs=ele.style.cssText;if(tcs!=""){tt+="\nStyle:"+"\n"+ele.style.cssText}
zt="";if(document.styleSheets.length>0){sn=document.styleSheets(0).rules.length;zt=""
for(i=0;i<sn;i++){dn=document.styleSheets[0].rules[i].selectorText
if(ele.tagName==dn){zt="\nGlobal style  Defn:\n"+document.styleSheets[0].rules[i].style.cssText}}}
ele.title=tt+zt}

[felgall]

1. It would work just as well if attached to the regular spot for JavaScript of just before the </body> tag.

2. If you wrap the code in an anonymous function then it would ensure it doesn't clash with any other script in the page apart from any using document.onmousemove (to avoid that clash you could substitute an event listener).