可视化选择HTML元素

Question

HTML网页以div格式呈现。如何允许用户单击并选择任何HTML标记？类似于Firebug和Chrome的功能。我需要按原样返回选定的标签。

Answer 1

在div上添加一个事件监听器，并检查事件的target属性（IE的srcElement）。

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

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

Answer 2

在jQuery中：

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

Answer 3

您可以为每个返回自身的html元素添加onclick属性。

Chrome和Firefox也有一个悬停，概述了元素的难度。为了以简单（和丑陋）的方式实现这一点，你可以为html元素添加一个悬停css伪类，为html元素添加1px的边框。

*:hover{
  border: 1px solid;
}

更好的方法是使用具有相同测量和位置的javascript创建一个新元素，并为其提供一个z-index，使其浮动在现有元素之上