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

Question

是否可以用 JavaScript 编写代码，突出显示鼠标指针所在（或单击）的 HTML 元素的边框，与Firebug的方式类似，但不使用浏览器扩展，而是单独依赖 JavaScript ？

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

[编辑]感谢您的回答！是否可以在不使用 GreaseMonkey 之类的情况下在外部页面（而不是我创建的页面）上运行这些示例？

Answer 1

监听document对象上的单击事件。然后，您可以检查事件对象以找出单击了哪个元素，然后更改其 CSSborder或outline根据需要进行更改。

一个非常简单的例子，不考虑跨浏览器兼容性问题是：

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