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

一.元素宽高:

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;

 

  分享技术,分享快乐!

posted @ 2017-01-03 21:37  win.w  阅读(212)  评论(0编辑  收藏  举报