Select HTML Elements Visually

An开发者_StackOverflow中文版 HTML webpage is rendered in div. How can I allow the user to click and select any HTML tag? Similar to how Firebug and Chrome does it. I need the selected tag returned as is.

Add an event listener on your div and check for the event's target property (srcElement for IE).

document.getElementById("page").onclick = function(e) {
    var target = e.target || e.srcElement;
    alert(e.target.tagName);
};

http://jsfiddle.net/Xeon06/e67qW/1/

In jQuery:

$.click( function(){
   var clicked = $(this); 
});

you can add a onclick attribute to each html element which returns itself.

Chrome and Firefox also have a hover which outlines the element tough. To make that in a easy (and ugly) way you could add a hover css pseudo class for the html elements which adds a border of 1px to the html element.

*:hover{
  border: 1px solid;
}

A better way would be to create a new element with javascript with the same measurements and position and to give it a z-index so it floats above the existing element