1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #box{ 8 200px; 9 height: 200px; 10 background-color: red; 11 padding: 20px; 12 border: 10px solid #000; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="box">撩课学院</div> 18 <script> 19 var box = document.getElementById('box'); 20 console.log(box.clientWidth, box.clientHeight); // 240 240 21 console.log(box.offsetWidth, box.offsetHeight); // 260 260 22 </script> 23 </body> 24 </html>
width+padding clientWidth
width+padding+border offsetWidth
1 width和height分析 2 border + padding + 内容的宽度和高度 3 console.log(box.offsetWidth, box.offsetHeight); 4 5 padding + 内容的宽度和高度 6 console.log(box.clientWidth, box.clientHeight);
里面内容滚动的内容的宽度和高度
console.log(box.scrollWidth, box.scrollHeight);
1 // offsetLeft: 当前元素距离有定位的父盒子左边的距离 2 // offsetTop: 当前元素距离有定位的父盒子上边的距离 3 console.log(box.offsetLeft, box.offsetTop); 4 5 // clientLeft: 左边边框的宽度； 6 // clientTop: 上边边框的宽度 7 console.log(box.clientLeft, box.clientTop); 8 9 // scrollLeft: 左边滚动的长度; 10 // scrollTop: 上边滚动的长度 11 console.log(box.scrollLeft, box.scrollTop);