Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Display Element Details

    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

    Code:
    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}
    Attached Files Attached Files
    Last edited by VIPStephan; 11-08-2012 at 10:38 PM. Reason: fixed code BB tags

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    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).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •