问答

前端如何实现chrome inspector的功能?

作者:admin 2021-05-05 我要评论

移动到页面对应的区域点击,出现一个遮罩层,并弹出对应的元素详情:dom selector,marign,color等等 目前想法:全局监听点击事件,获取坐标,通过document.elemen...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

移动到页面对应的区域点击,出现一个遮罩层,并弹出对应的元素详情:dom selector,marign,color等等
image.png

目前想法:全局监听点击事件,获取坐标,通过document.elementFromPoint(x,y) 获取,但是只能获取某个坐标点的单个元素,结合它的父元素吗?

这种有没有现成的开源库供参考的?

###

其实不用取坐标,有现成的 mouseover 事件可以用……

document.addEventListener('mouseover', function(e) { 
    let el = e.target;
    if (el && el.style) {
        el._prevBackground = el.style.background;
        el.style.background = 'yellow';
    }
}, false);

document.addEventListener('mouseout', function(e) { 
    let el = e.target;
    if (el && el.style) {
        el.style.background = el._prevBackground;
    }
}, false);

打开开发者工具,直接拷贝粘贴上述代码,回车执行,然后鼠标在网页内动一动,有惊喜……

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 前端如何实现chrome inspector的功能?

    前端如何实现chrome inspector的功能?

  • 在电视上看到一个Lambda(λ)图标的软

    在电视上看到一个Lambda(λ)图标的软

  • 在rust里这行代码为什么报错。

    在rust里这行代码为什么报错。

  • python3 在linux 下面绝对路径运行报错

    python3 在linux 下面绝对路径运行报错

腾讯云代理商
海外云服务器