位置相關屬性 · 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> ~~~