窗口尺寸，文档高，元素宽高的获取方式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了窗口尺寸，文档高，元素宽高的获取方式相关的知识，希望对你有一定的参考价值。
一.元素宽高：
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;
分享技术，分享快乐！
以上是关于窗口尺寸，文档高，元素宽高的获取方式的主要内容，如果未能解决你的问题，请参考以下文章