最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > DOM元素属性快速查看器

DOM元素属性快速查看器

发布时间:2019年11月12日 评论数:抢沙发阅读数: 5255

    先来看看下面要说的是一个什么东西?

    请下面效果:

    点击查看原图

    知道是啥东西了吗?没错,当鼠标悬停在元素上的时候,DOM元素的属性实时显示出来了。


    自己尝试一下

    将下面的代码复制到浏览器控制台中执行,然后将鼠标悬停到网页任意位置上,你看到了什么效果呢?

    下面是一段神器的代码:


    (function SpyOn() {
    	const _id = 'spyon-container',
    	_posBuffer = 3;
    
    	function init() {
    		document.body.addEventListener('mousemove', glide);
    		document.body.addEventListener('mouseover', show);
    		document.body.addEventListener('mouseleave', hide);
    	}
    
    	function hide(e) {
    		document.getElementById(_id).style.display = 'none';
    	}
    
    	function show(e) {
    		const spyContainer = document.getElementById(_id);
    		if(!spyContainer) {
    			create();
    			return;
    		}
    		if(spyContainer.style.display !== 'block') {
    			spyContainer.style.display = 'block';
    		}
    	}
    
    	function glide(e) {
    		const spyContainer = document.getElementById(_id);
    		if(!spyContainer) {
    			create();
    			return;
    		}
    
        	const left = e.clientX + getScrollPos().left + _posBuffer;
        	const top = e.clientY + getScrollPos().top + _posBuffer;
        	spyContainer.innerHTML = showAttributes(e.target);
        	if(left + spyContainer.offsetWidth > window.innerWidth) {
        		spyContainer.style.left = left - spyContainer.offsetWidth + 'px';
        	} else {
        		spyContainer.style.left = left + 'px';
        	}
        	spyContainer.style.top = top + 'px';
    	}
    
    	function getScrollPos() {
    		const ieEdge = document.all ? false : true;
    		if(! ieEdge) {
    			return {
    				left: document.body.scrollLeft,
    				top: document.body.scrollTop
    			};
    		} else {
    			return {
    				left: document.documentElement.scrollLeft,
    				top: document.documentElement.scrollTop
    			}
    		}
    	}
    
    	function showAttributes(el) {
    		const nodeName = `<span style="font-weight:bold;">${el.nodeName.toLowerCase()}</span><br/>`;
    		const attrArr = Array.from(el.attributes);
    		const attributes = attrArr.reduce((attrs, attr) => {
    			attrs += `<span style="color:#ffffcc;">${attr.nodeName}</span>="${attr.nodeValue}"<br/>`;
    			return attrs;
    		}, '');
    		return nodeName + attributes;
    	}
    
    	function create() {
    		const div = document.createElement('div');
    		div.id = _id;
    		div.setAttribute('style', `
    			position: absolute;
    			left: 0;
    			top: 0;
    			width: auto;
    			height: auto;
    			padding: 10px;
    			box-sizing: border-box;
    			color: #fff;
    			background-color: #444;
    			z-index: 1000000;
    			font-size: 12px;
    			border-radius: 5px;
    			line-height: 20px;
    			max-width: 45%;
    		`);
    		document.body.appendChild(div);
    	}
    	init();
    })()

    它是怎么工作的呢

    此模块以 IIFE(立即调用函数表达式) 的形式实现。这样只要需要一些 DOM 监视辅助,就可以将代码复制并粘贴到 Web 控制台中。将 div 插入到文档的正文中,并在正文上启用鼠标事件侦听器。从目标元素中检索属性,将其简化为单个字符串,最后在工具提示中显示。


    用例

    帮助解决UI错误

    确保你所应用的 DOM 元素能够按预期工作(比如点击获得正确的类,等等)

    了解一个 Web 应用的结构


    你可以从这段代码中学到什么

    如何使用 Vanilla JS 实现工具提示模块

    如何解析 DOM 对象的属性

    如何找到鼠标 X 和 Y 的位置

    如何获取文档的滚动位置

    了解不同浏览器的行为方式 —— Edge vs. Chrome vs. Safari


    开源

    你可以在这里找到源代码,希望你能做得更好!也许你不希望将其作为 IIFE 来实现,或者是去显示其他数据。



二维码加载中...
本文作者:DGF      文章标题: DOM元素属性快速查看器
本文地址: https://arbays.com/post-144.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论