js 实现 浏览器控制台 Elements 选框功能

移动鼠标看看

var DomOutLine =  jQuery('<div />',{
	id: 'DomOutLine',
	style: `transition: all .2s;background:rgba(0,0,0,.5);position:absolute;z-index: 1000000;pointer-events: none;`
});
var DomInfo = jQuery('<div />',{
	id: 'DomInfo',
	style: `
		background: #333740;
	    position: absolute;
	    z-index: 1000001;
	    pointer-events: none;
	    height: 26px;
	    border: 1px solid #fff;
	    border-radius: 3px;
	    font-size: 12px;
	    line-height: 26px;
	    color: #fff;
	    padding: 0 10px;
	    top: -26px;
	    box-sizing: border-box;
	`
});
DomInfo.appendTo(DomOutLine);
jQuery('body').append(DomOutLine);
jQuery('body').bind('mousemove',function(e){
	var d = e.target.getBoundingClientRect();
	$('#DomOutLine').css({
		bottom:d.bottom,
		height:d.height,
		left:d.left,
		right:d.right,
		top:d.top+jQuery(window).scrollTop(),
		width:d.width
	})
	var idTxt = '';
	if(e.target.id){
		idTxt = '#'+e.target.id;
	}
	var classTxt = '';
	if(e.target.classList){
		e.target.classList.forEach( function(element, index) {
			classTxt += '.'+element;
		});
	}
	$('#DomInfo').text(`${e.target.nodeName.toLowerCase()}${idTxt}${classTxt}|${d.width}x${d.height}`)
});