窗口尺寸，文档高，元素宽高的获取方式

一.元素宽高：

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
}

二.窗口尺寸

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 : 内容实际宽高

　　　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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/572848.shtml