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