如何在鼠标点击时突出显示HTML元素？

Question

是否有可能在JavaScript中编写代码，该代码突出显示鼠标指针所在的HTML元素的边界（或点击），类似于Firebug的做法，但不使用浏览器扩展，而是依赖于单独使用JavaScript？

如果是这样，是否可以在鼠标点击元素后从HTML代码中获取相关元素？

感谢您的答案！是否有可能在外部页面（而不是我创建的页面）上运行这些示例，而不使用GreaseMonkey之类的东西？

Answer 1

这是一个简单的例子。您应该能够建立在此：

document.onclick = function(e) { 
    var event = e || window.event; 

    // this is the element you want: 
    var target = e.target || e.srcElement; 
} 

这种方法很可能是更优选：

var hilightElement = function(e) { 
    var event = e || window.event; 

    // this is the element you want: 
    var target = e.target || e.srcElement; 
}; 

if (document.addEventListener){ 
    document.addEventListener('click', hilightElement, false); 
} else if (document.attachEvent){ 
    document.attachEvent('onclick', hilightElement); 
} 

Answer 2

监听document对象上的click事件。然后，您可以检查事件对象以找出哪个元素被点击，然后根据需要更改其CSS border或outline。

一个很简单的例子，并不试图解释跨浏览器兼容的问题将是：

document.addEventListener('click', function (e) { 
     e.target.style.outline = "solid blue 1px"; 
}); 

Answer 3

实例的jQuery：

$('#myElement'/* Replace with asterisk if you want it to work for every element */).click 
(
    function() 
    { 
     $(this).css('outline', '1px solid red'); 
    } 
);