CODEWITHSUNDEEP
javascripthtml
HyderA
HyderA

Reputation: 21401

Select HTML Elements Visually

An 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.

Upvotes: 1

Views: 1638

Answers (3)

Ben
Ben

Reputation: 13635

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

Upvotes: 1

Alex Turpin
Alex Turpin

Reputation: 47776

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/

Upvotes: 4

Chris G.
Chris G.

Reputation: 3981

In jQuery:

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

Upvotes: 2

Related Questions