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

Question

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

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

Answer 1

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

Answer 2

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

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

一步一步的说明.

首先创建所需的5个 HTMLElements.

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

然后我们所做的就是计算选择器所有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.

Answer 3

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

.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中使用了类似的东西.

Answer 4

HTML 元素选择器 (Vanilla JS)

仅使用 Vanilla JS 选择并突出显示页面上的任何 HTML 元素！在 Chrome、FF 和 Opera 中测试，不适用于 IE。

这个怎么运作：

你需要的其实很简单。您可以在 JS 中创建一个带有背景的空 div 框，然后移动它以突出显示悬停元素的顶部。这是JS代码：

const hoverBox = document.createElement("div");
console.log("hoverBox: ", hoverBox);
hoverBox.style.position = "absolute";
// change to whatever highlight color you want
hoverBox.style.background = "rgba(153, 235, 255, 0.5)";
// avoid blocking the hovered element and its surroundings
hoverBox.style.zIndex = "0";
document.body.appendChild(hoverBox);
let previousTarget;
document.addEventListener("mousemove", (e) => {
    let target = e.target;
    if (target === hoverBox) {
        // the truely hovered element behind the added hover box
        const hoveredElement = document.elementsFromPoint(e.clientX, e.clientY)[1];
        if (previousTarget === hoveredElement){
            // avoid repeated calculation and rendering
            return;
        } else{
            target = hoveredElement;
        }
    } else{
        previousTarget = target;
    }
    const targetOffset = target.getBoundingClientRect();
    const targetHeight = targetOffset.height;
    const targetWidth = targetOffset.width;
    // add a border around hover box
    const boxBorder = 5;
    hoverBox.style.width = targetWidth + boxBorder * 2 + "px";
    hoverBox.style.height = targetHeight + boxBorder * 2 + "px";
    // need scrollX and scrollY to account for scrolling
    hoverBox.style.top = targetOffset.top + window.scrollY - boxBorder + "px";
    hoverBox.style.left = targetOffset.left + window.scrollX - boxBorder + "px";
});

请参阅演示
我还为元素选择器制作了一个npm 包，其中包含更多用户配置，如背景颜色、边框宽度、过渡等。这是GitHub 页面。

Answer 5

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

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