直观地选择 HTML 元素答案

【问题标题】：Select HTML Elements Visually直观地选择 HTML 元素
【发布时间】：2011-10-03 16:05:06
【问题描述】：

在 div 中呈现 HTML 网页。如何允许用户单击并选择任何 HTML 标记？类似于 Firebug 和 Chrome 的做法。我需要按原样返回所选标签。

【问题讨论】：

不要删除它。相反，接受一个答案，让其他可能有同样问题的人回答。
如果您不想以后因此而感到尴尬，请在提问之前三思而后行。就个人而言，我不会担心。 We all have embarrassing questions（我可以继续……）。

【解决方案1】：

在您的div 上添加一个事件侦听器并检查该事件的target 属性（srcElement 用于 IE）。

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

【讨论】：

【解决方案2】：

在 jQuery 中：

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

【讨论】：

【解决方案3】：

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

Chrome 和 Firefox 也有一个悬停功能，可以勾勒出元素的轮廓。为了以一种简单（且丑陋）的方式实现这一点，您可以为 html 元素添加一个悬停 css 伪类，为 html 元素添加 1px 的边框。

*:hover{
  border: 1px solid;
}

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

【讨论】：