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对象上的点击事件。然后，您可以检查事件对象以找出单击了哪个元素，然后根据需要更改其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');
    }
);

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

3 个答案: