getBoundingClientRect
作用：获取元素盒模型的一些信息，得到的结果是没有单位，不包含滚动条的
width 宽度（包含边框，内边距）
height 高度（包含边框，内边距）
left 元素最左边到可视区的最左边的距离
right 元素的最右边到可视区最左边的距离
top 元素的最上边到可视区最上边的距离
bottom 元素的最下边到可视区的最上边的距离
<style type="text/css"> *{ margin:0; padding:0; } #box{ 100px; height: 100px; background: #f00; padding: 20px; position: absolute; left:300px; top:200px; border:10px solid #000; } </style> </head> <body> <dib id="box"></dib> </body> </html> var box=document.getElementById("box"); var res=box.getBoundingClientRect(); console.log(res.width);// 160 包括边框,内边距 console.log(res.height); // 160 包括边框 console.log(res.left); // 300 console.log(res.right); // 460 console.log(res.top); //200 console.log(res.bottom); // 360 </script>
PS：附上一张自己动手画的图好理解一点
