使用 jquery 的 Chrome inspect 元素

Chrome inspect element using jquery

本文关键字：inspect 元素 Chrome jquery 使用      更新时间：2023-09-26

我想在Chrome的开发工具中创建类似于检查dom功能的东西。

当悬停在 - 预设的 dom 列表 - 在 dom 顶部创建一个div.shadow，覆盖它的宽度/高度相同，当鼠标离开时，阴影被隐藏，或者在悬停新选择的 dom 的情况下，它会改变位置和尺寸。

dom.mouseover(function(e) {
  shadow.css({
    display: "block",
    width: dom.width+"px",
    height: dom.height+"px",
    top: dom.top+"px",
    left: dom.left+"px"
  });
});
shadow.mouseleave(function() {
  $(this).css('display', 'none');
});;

但是当在选定的 dom 列表中有父/子项（如"body"）时会出现问题，它会在身体上放置阴影，但随后忽略来自子项的任何鼠标悬停/鼠标输入。

经过测试并完全正常工作

var shadow = $('<div></div>').css({background: 'rgba(100,0,0,0.5)', position: 'absolute'}).appendTo('body');
$(document).on('mousemove', function(e) {
    shadow.hide();
    var x = e.clientX, y = e.clientY,
        dom = $(document.elementFromPoint(x, y));
    if(dom.length < 1)
        return;
    shadow.css({
        display: "block",
        width: dom[0].offsetWidth +"px",
        height: dom[0].offsetHeight +"px",
        top: dom.position().top +"px",
        left: dom.position().left +"px"
   });
   shadow.show();
});

您是否考虑过使用大纲而不是覆盖当前选定的元素？ 当元素被覆盖时，你不能使用mousemove来给你悬停的目标元素（因为最上面的元素将永远是阴影）。 这需要每次火灾时隐藏和显示阴影mousemove这伤害了性能。

请参阅此示例，该示例仅使用大纲和目标元素 mousemove ： http://jsfiddle.net/U4fBu/3/

var _prevElm, _prevOutline;
document.addEventListener("mousemove", function(e) {
    if (_prevElm != e.target) {
        // Restore old outline styles
        if (_prevElm) _prevElm.style.outline = _prevOutline;
        // Outline the newly hovered element
        _prevElm = e.target;
        _prevOutline = _prevElm.style.outline;
        e.target.style.outline = "3px solid #0f0";
    }
});
document.addEventListener("click", function(e) {
    // Don't let the click affect the actual page
    e.stopImmediatePropagation();
    var elm = e.target;
    output.innerHTML = "Element clicked: "
        + elm.tagName
        + (elm.id ? "#" + elm.id : "");
});

你需要的是：document.elementFromPoint(x, y)

  • 你必须隐藏阴影（显示：无），
  • 从事件中获取鼠标的坐标，
  • 使用document.elementFromPoint(x, y)获取您正在浏览的元素
  • 将阴影的可见性设置回正常。

查看 http://www.quirksmode.org/dom/tests/elementfrompoint.html 它是如何工作的。

不过，您无法使用鼠标悬停来做到这一点,...你必须使用mousemove

相关文章：