offsetWidth、offsetLeft、clientWidth、clientLeft、scrollWidth、scrollLeft各自特点比较

前言

• 趁周末的时间，小结了一下offsetWidth、offsetLeft、clientWidth等这一系列的容易混淆的属性，旨在以后遇到相关问题时，能够有据可查，也欢迎读者留言提出建议，意见。谢谢！

offsetWidth、offsetHeight

• 对象整体的实际宽高，包括滚动条等边线。会随对象显示大小的变化而变化。

• offsetWidth:(width + padding + border)

• style.width返回值除了数字还带有单位“px”；

• 如对象的宽度设定值为百分比宽度，则无论页面变大还是变小，style.width都返回此百分比，而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值。

• 如果没有给HTML元素指定过width样式，则style.width返回的是空字符串。

• offsetHeight同offsetWidth。

  ---

offsetLeft、offsetTop

• 当前对象到其父级左边的距离。

• 不能对其赋值，设置对象到其父级左边的距离用style.left。

• style.left返回值除了数字外还有单位“px”。

• 如果对象到其父级左边的距离设定值为百分比，style.left返回此百分比，而offset.Left返回到其父级左边的距离的值。

• 如果没有给HTML元素指定过left样式，则style.left返回的是空字符串。

• offsetTop同offsetLeft

• 注意：如果对象父级为body，由于IE、FF(FIreFox)对padding和margin的解析不一样。所以会有不是下列的区别就不成立了。

  • 1)、如果div的父级是body，而div与body之间有个div，如body -> div -> div1；div1的offsetTop=div的padding+margin+border；

  • 2)、如果div的 父级的body，如body -> div1；div1的offsetTop= div的padding+margin+border；这div1的offsetTop= div1的margin>body.padding则为div1的margin，否则为body.padding谁大就是谁。

  • FF上述两种情况：offsetTop= margin+padding；
    

    ---

clientWidth、clientHeight

• 对象的可见内容的宽度、高度，不包括滚动条，不包括边框。
  

  ---

clientLeft、clientTop

• 对象的border宽度、高度
  

  ---

scrollWidth、scrollHeight

• 对象的滚动的宽度、高度。
  

  ---

scrollLeft、scrollTop

• 设置或者获取位于对象左边界或者最顶端和对象中可见内容的最左端或者最顶端之间的距离。(width+padding为一体，height+padding为一体)
  

  ---

小结

• 网页可见区域宽： document.body.clientWidth;

• 网页可见区域高： document.body.clientHeight;

• 网页可见区域宽： document.body.offsetWidth (包括边线的宽);

• 网页可见区域高： document.body.offsetHeight (包括边线的宽);

• 网页正文全文宽： document.body.scrollWidth;

• 网页正文全文高： document.body.scrollHeight;

• 网页被卷去的高： document.body.scrollTop;

• 网页被卷去的左： document.body.scrollLeft;

• 网页正文部分上： window.screenTop;

• 网页正文部分左： window.screenLeft;

• 屏幕分辨率的高： window.screen.height;

• 屏幕分辨率的宽： window.screen.width;

• 屏幕可用工作区高度： window.screen.availHeight;

• 屏幕可用工作区宽度：window.screen.availWidth;