移动鼠标看看
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}`)
});