1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #box{ 8 width: 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"> School tease lesson </ 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 and height analyze 2 border padding + + content width and height . 3 the console.log (box.offsetWidth, box.offsetHeight); . 4 . 5 padding + width and height of the content . 6 the console.log (box.clientWidth, box.clientHeight );
Width and height of the contents inside the scroll content
console.log(box.scrollWidth, box.scrollHeight);
. 1 // the offsetLeft: current element positioned away from the parent has left the box 2 // the offsetTop: positioning the current element is located a distance from the upper side of the parent case . 3 the console.log (box.offsetLeft, box.offsetTop); . 4 . 5 // clientLeft: left border width; . 6 // clientTop: width of the upper border . 7 the console.log (box.clientLeft, box.clientTop); . 8 . 9 // the scrollLeft: left rolling length; 10 // scrollTop: the length of the upper roll . 11 the console.log (box.scrollLeft, box.scrollTop);