窗口尺寸，文档高，元素宽高的获取方式
一.元素寬高：
window.onload = function() {
?? ?var oDiv = document.getElementById('div1');
?? ?/*
?? ??? ?width height
?? ??? ?style.width : 樣式寬
?? ??? ?clientWidth : 可視區寬
?? ??? ?offsetWidth?? ?: 占位寬
?? ?*/???
?? ?alert( oDiv.style.width );?? ?//100
?? ?alert( oDiv.clientWidth );?? ?//樣式寬 + padding?? ?120
?? ?alert( oDiv.offsetWidth );?? ?//樣式寬 + padding + border? 可視區寬 + 邊框?? ?122???
}
<body>
?? ?<div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>
</body>
?
二.窗口尺寸
1.可視區尺寸
?? alert( document.documentElement.clientHeight );
2.滾動距離
?? ?? document.documentElement.scrollTop;???? // firefox,IE下的，此方式在chrome下始終為0
?? ?? document.body.scrollTop ;???????????????????????? // chorme下的
?? ?? var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;?? //使用時做兼容性處理
?? ?? alert(scrollTop)
3.offsetLeft[Top]
元素.offsetLeft[Top] : 只讀 屬性 當前元素到定位父級的距離（偏移值）
?? ??? ??? ?到當前元素的offsetParent的距離
?? ??? ??? ?如果沒有定位父級
?? ??? ??? ??? ?offsetParent -> body
?? ??? ??? ??? ?offsetLeft -> html
?? ??? ??? ?
?? ??? ??? ?如果有定位父級
?? ??? ??? ??? ?ie7以下：如果自己沒有定位，那么offsetLeft[Top]是到body的距離
?? ??? ??? ??? ??? ??? ?如果自己有定位，那么就是到定位父級的距離
?? ??? ??? ??? ?其他：到定位父級的距離
4.scrollHeight
scrollHeight : 內容實際寬高
<body style="height:2000px;">
?? ? <div id="div1" style="width:100px;height:100px;border: 1px solid red; overflow: -auto; padding: 10px;">
?? ??? ? <div style="height: 600px;width: 90px; background: red;"></div>
??? </div>
</body>
alert(oDiv.scrollHeight);
三.文檔高
offsetHeight
??? alert( document.body.offsetHeight );
??? ie : 如果內容沒有可視區高，那么文檔高就是可視區
??? alert( document.documentElement.offsetHeight );
四.clientX[Y]
clientX[Y] : 當一個事件發生的時候，鼠標到頁面可視區的距離
function fn1(ev) {
?? ?var ev = ev || event;
?? ? alert(ev.clientX);
}
document.onclick = fn1;
?
分享技術，分享快樂！
轉載于:https://www.cnblogs.com/babywin/p/6246547.html
總結
以上是生活随笔為你收集整理的窗口尺寸，文档高，元素宽高的获取方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [flask 优化] 由flask-bo
- 下一篇： python的递归算法学习（1）