可视化地选择HTML元素

Select HTML Elements Visually

本文关键字：元素 HTML 选择 可视化      更新时间：2023-09-26

一个HTML网页是在div中呈现的。我如何允许用户点击并选择任何HTML标签?类似于Firebug和Chrome的做法。我需要选择的标签原样返回

在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/

jQuery中:

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

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

Chrome和Firefox也有一个悬停，勾勒出元素的轮廓。为了简单(和丑陋)地做到这一点，你可以为html元素添加一个hover css伪类，它为html元素添加了1px的边框。

*:hover{
  border: 1px solid;
}

更好的方法是用javascript创建一个具有相同尺寸和位置的新元素，并给它一个z-index，以便它漂浮在现有元素

之上
相关文章：