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