offset client scroll
頁面中所有標簽都是元素（element）,html標簽是根元素，元素可看出是對象
頁面中所有內容都是節點（node），所以標簽、屬性、文本都是節點，而文本包括文字回車換行空格
在DOM對象上有個?properties?屬性，offset、client和scroll三大系列都在properties里
offset
DOM對象上有offsetLeft、offsetTop、offsetWidth、offsetHeight和offsetParent五個屬性
| ?offsetWidth | ?返回元素的寬度 （content+padding+border） |
| ?offsetHeight | ?返回元素的高度 （content+padding+border） |
| ?offsetLeft | ?返回元素的水平偏移位置 |
| ?offsetTop | ?返回元素的垂直漂移位置 |
| ?offsetParent | ?返回元素的偏移容器 |
?
?
?
?
?
?
?
?
?
標準流中，offsetLeft和offsetTop的偏移是相對于document來說的，也就是距離瀏覽器窗口左邊的距離
<head><style>#box {width: 100px;height: 100px;background: #2c323b;}</style> </head> <body> <div id="box"> </div> <script>var box = document.getElementById('box')console.log(box.offsetLeft) </script> </body>由于body有默認的margin，所以此時box的offsetLeft為8px
給body設置樣式
body {border:10px solid #3385ff;padding:30px;margin:40px; }box的offsetLeft變為為80px
?
標準流時，元素的offsetLeft為：父級margin+border+padding +?自己margin
脫標時父級或祖先級元素沒有定位，則元素offsetLeft為：自己的left+margin
若父級或祖先元素有定位，那個元素就是偏移容器（offsetParent），offsetLeft為：偏移容器的border +?自己的left +?margin
?client
| ?clientWidth | ?返回元素的可見寬度 |
| ?clientHeight | ?返回元素的可見高度 |
| ?clientLeft | ?返回元素左邊框寬度 |
| ?clientTop | ?返回元素上邊框寬度 |
?
?
?
?
?
?
clientWidth，元素可視區域的寬度，不包括邊框
clientX和clientY是鼠標事件處理參數對象里的屬性，事件觸發時返回鼠標指針在瀏覽器窗口的坐標
scroll
| ?scrollWidth | ?返回元素內容的寬度 |
| ?scrollHeight | ?返回元素內容的高度 |
| ?scrollLeft | ?返回元素向左卷曲的距離 |
| ?scrollTop | ?返回元素向上卷曲的距離 |
?
?
?
?
?
?
scrollWidth，元素沒內容或內容寬度小于元素寬度，則為元素寬度
轉載于:https://www.cnblogs.com/Grani/p/9668665.html
總結
以上是生活随笔為你收集整理的offset client scroll的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初识Django —Python API
- 下一篇： MongoDB集群之分片技术应用 ——