我想编写一个浏览器（Chrome/FF）扩展，需要选择网页上的元素。我希望它的行为像 Firebug 的元素检查器那样。单击检查箭头，然后可以悬停/突出显示元素。当您单击所需的元素时，系统会检查该元素。我只是对允许用户选择元素的代码感兴趣 - 而不是实际检查它或类似的东西。

因为我正在编写一个扩展，所以如果您可以提供非 jQuery/Prototype/等代码可能会很好，这样我就不必分发它。

我最近在我正在从事的一个项目中需要这样的功能，结果我必须使用侧面来创建一个盒子，因为否则event.target当你移动鼠标时最终会成为选择器，如果我使用z-index: -1会有点fishy当你有很多重叠的元素时......等等。

这是我为了您的利益而从我的项目转换而来的版本，它涉及 jQuery，但转换为非常简单vanilla因为只有mousemove & css使用 jQuery 的方法。

逐步说明。

首先创建5必需的 HTML 元素。

<div id="selector">
    <div id="selector-top"></div>
    <div id="selector-left"></div>
    <div id="selector-right"></div>
    <div id="selector-bottom"></div>
</div>

其次创建一个mousemove事件于document（或你的容器）

$(document).mousemove(function(event) { ... });

然后在里面mousemove我们将做一些基本检查以防止选择HTML, BODY, selector

var id = event.target.id, tagName = event.target.tagName;

if(id.indexOf('selector') !== -1 || tagName === 'BODY' || tagName === 'HTML') {
   return;
} 

然后我们需要创建一个对象来存储我们的元素，如下所示。

var elements = {
    top: $('#selector-top'),
    left: $('#selector-left'),
    right: $('#selector-right'),
    bottom: $('#selector-bottom')
};

之后，我们存储一些变量来保存有关目标元素的一些信息，如下所示。

var $target = event.target;
    targetOffset = $target.getBoundingClientRect(),
    targetHeight = targetOffset.height,
    targetWidth  = targetOffset.width;

然后我们要做的就是计算position & height对全部4选择器的两侧就像这样。

elements.top.css({
    left:  (targetOffset.left - 4),
    top:   (targetOffset.top - 4),
    width: (targetWidth + 5)
});

elements.bottom.css({
    top:   (targetOffset.top + targetHeight + 1),
    left:  (targetOffset.left  - 3),
    width: (targetWidth + 4)
});

elements.left.css({
    left:   (targetOffset.left  - 5),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

elements.right.css({
    left:   (targetOffset.left + targetWidth + 1),
    top:    (targetOffset.top  - 4),
    height: (targetHeight + 8)
});

全部+aFewPixels只是一点点优化，这样就有了2px选择器和目标之间的间隙。

For the CSS这就是我的想法。

#selector-top, #selector-bottom {
    background: blue;
    height:3px;
    position: fixed;
    transition:all 300ms ease;
}

#selector-left, #selector-right {
    background: blue;
    width:3px;
    position: fixed;
    transition:all 300ms ease;
}

The transition给选择器一个非常好的滑动效果。

尝试演示http://jsfiddle.net/rFc8E/9/ http://jsfiddle.net/rFc8E/9/

注意：这也适用于transform: scale(2);例如。当元素的大小缩放时。

Edit:我刚刚更新了这个，我注意到elements对象是inside事件处理程序，我已将其移到演示中的外部，这是一个非常重要的性能改进，因为现在，elements对象仅被创建once代替数十万 if not millions内的次数mousemove event.