位置相关属性 · web前端

[TOC] # offset偏移量 * offsetParent用于获取定位的父级元素 * offsetParent和parentNode的区别 ![](https://img.kancloud.cn/c9/02/c902fcda6a4e591b537048bb51e48d82_882x516.png) ~~~ var box = document.getElementById('box'); console.log(box.offsetParent); console.log(box.offsetLeft); console.log(box.offsetTop); console.log(box.offsetWidth); console.log(box.offsetHeight); ~~~ ~~~ <style> body { margin: 0; height: 1000px; } #box { position: relative; width: 300px; height: 300px; background-color: red; overflow: hidden; margin: 50px; } #child { width: 100px; height: 100px; background-color: blue; margin: 20px; border: 10px solid yellow; padding: 10px; } </style> <body> <div id="box"> <div id="child"></div> </div> </body> <script type="text/javascript"> // 3组和大小位置相关的属性 // offset client scroll var box = document.getElementById('box'); // 获取box的坐标 console.log(box.offsetLeft); console.log(box.offsetTop); // 获取box的大小 console.log(box.offsetWidth); console.log(box.offsetHeight); // offsetParent 获取距离当前元素最近的定位父元素，如果没有定位父元素此时是body console.log("===================================================="); // 获取子元素的位置和大小 var child = document.getElementById('child'); console.log(child.offsetParent); // 获取child的位置 offsetLeft 距离offsetParent的横向偏移, 就是当前元素最近的定位父元素 console.log(child.offsetLeft); console.log(child.offsetTop); // 获取child的大小包括边框和padding console.log(child.offsetWidth); console.log(child.offsetHeight); </script> ~~~ # client客户区大小 ![](https://img.kancloud.cn/87/ad/87ad230f10fc27d4b9ebc287559fac74_853x548.png) ~~~ var box = document.getElementById('box'); console.log(box.clientLeft); console.log(box.clientTop); console.log(box.clientWidth); console.log(box.clientHeight); ~~~ ~~~ <style> #box { width: 100px; height: 100px; margin: 50px; border: 30px solid red; padding: 10px; background-color: green; } </style> <body> <div id="box"> </div> </body> <script type="text/javascript"> // client var box = document.getElementById('box'); // clientLeft 是border-left 的宽度 // clientTop border-top 的宽度 console.log(box.clientLeft); //30 console.log(box.clientTop); //30 // 获取大小包括padding 但是不包括边框 console.log(box.clientWidth); //120 console.log(box.clientHeight); //120 // offsetWidth offsetHeight 包括padding和边框 </script> ~~~ # scroll滚动偏移 ![](https://img.kancloud.cn/aa/de/aade1fd3e8b840caae8f1ec585351c4b_845x521.png) ~~~ var box = document.getElementById('box'); console.log(box.scrollLeft) console.log(box.scrollTop) console.log(box.scrollWidth) console.log(box.scrollHeight) ~~~ ~~~ <style> body { margin: 0; } #box { width: 100px; height: 100px; margin: 50px; border: 30px solid red; padding: 10px; background-color: green; overflow: auto; } </style> <body> <div id="box"> 小明跟小华到动物园玩，进门时，小明指着小华对看门人说：“看清楚喔！等会儿出来，别说我偷了你们的猴子！” </div> </body> <script type="text/javascript"> var box = document.getElementById('box'); // 当拖动box中的滚动条的时候触发 box.onscroll = function () { console.log(box.scrollLeft); console.log(box.scrollTop); } // box滚动出去的距离 console.log(box.scrollLeft); console.log(box.scrollTop); // 内容的大小，包括padding 和未显示的内容，不包括滚动条 console.log(box.scrollWidth); console.log(box.scrollHeight); // 元素的大小 + padding 不包括滚动条 console.log(box.clientWidth); console.log(box.clientHeight); </script> ~~~