Javascript:让用户选择像Firebug这样的HTML元素？

我想编写一个浏览器(Chrome/FF)扩展程序,需要在网页上选择一个元素.我希望它表现得像Firebug的元素检查员那样.单击检查箭头,然后可以悬停/突出显示元素.单击所需的元素时,将检查该元素.我只是对代码感兴趣,允许用户选择一个元素 - 而不是实际检查它或类似的东西.

因为我正在写一个扩展,如果你能提供非jQuery/Prototype/etc ..代码可能会很好,所以我不必分发它.

1> Andrew Child..：

---

我使用jQuery作为另一个项目的组件编写了一个实现.源代码和文档可在此处获得:https://github.com/andrewchilds/jQuery.DomOutline

---

完美的工作.我喜欢这些人的叉子,因为它实时突出显示:https://github.com/smmalmansoori/jQuery.DomOutline

2> iConnor..：

---

我最近为我正在进行的项目需要这样的功能,原来我必须使用侧面创建一个盒子,否则event.target当你移动鼠标时最终会成为选择器,如果我要使用z-index: -1它当你有很多重叠的元素时,会有点可疑.

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

一步一步的说明.

首先创建所需的5个 HTMLElements.

其次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;

然后我们所做的就是计算选择器所有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选择器和目标之间存在差距.

因为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;
}

在transition给出了选择一个非常漂亮的滑动效果.

试试http://jsfiddle.net/rFc8E/9/

注意:这也适用于transform: scale(2);例如.当元素按比例缩放时.

编辑:我刚刚更新了这个,我注意到elements对象是在事件处理程序中,我在演示中将它移到了外面,这是一个非常重要的性能改进,因为现在,elements对象只创建一次而不是数百个活动内部数千甚至数百万次mousemove.

3> antonj..：

---

一种简单的方法是使用轮廓而不是边框​​:

.highlight { outline: 4px solid #07C; }

只需在要选择/取消选择的任何元素上添加和删除该类(下面的代码未经过正确测试):

document.body.addEventListener("mouseover", function(e) {
    e.stopPropagation();
    e.target.addEventListener("mouseout", function (e) {
        e.target.className = e.target.className.replace(new RegExp(" highlight\\b", "g"), "");
    });
    e.target.className += " highlight";
});

由于您使用的是轮廓(Chrome支持)而不是边框​​,因此元素不会跳转.我在EasyReader Extension中使用了类似的东西.

4> Chad..：

---

我最后在Firebug小组中询问并得到了一些很好的帮助:

http://groups.google.com/group/firebug/browse_thread/thread/7d4bd89537cd24e7/2c9483d699efe257?hl=en#2c9483d699efe257