窗口/元素大小

Posted on   |  

由于最近想重新设计弹窗效果频繁设计窗口大小，以及之前的滚动效果也涉及到滚动窗大小，所以决定弄清楚。

元素大小

这部分内容可参见《JAVASCRIPT高级程序设计第三版》第320页

偏移量

  • offsetHeight：包括元素的高度、（可见的）水平滚动条高度、上&下边框高度
  • offsetWidth：包括元素的宽度、（可见的）垂直滚动条高度、左&右边框高度
  • offsetLeft：元素左边框至包含元素的左内边框之间的像素距离

这里可以解释body元素即使存在margin，它的offsetLeft也为0。 因为body元素的offsetParent是null,也就是相当于它自身，所以它的offsetLeft为0。

console.log(document.body.offsetParent);//null
console.log(document.body.offsetLeft);//0
  • offsetTop：元素上边框至包含元素的上内边框之间的像素距离

客户区大小

  • clientWidth：内容加左右padding
  • clientHeight：内容加上下padding

滚动大小

  • scrollHeight：元素内容的总高度
  • scrollWidth：元素内容的总宽度
  • scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置
  • scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置

对于body来说它如果存在滚动条页面总高度就是

document.documentElement.scrollHeight;

对于运行在混杂模式的IE，需要用doument.body代替document.documentElement。

确定元素大小

利用方法getBoundingClientRect()，返回一个矩形对象，包含left、top、right、bottom。IE8之前认为左上角坐标为（2，2），其他浏览器认为是（0，0）。

获取浏览器窗口大小

最佳方法

document.documentElement.clientHeight;
document.documentElement.clientWidth;

或者如下，但要求body的magrin为0

body{
    margin:0;    
}
document.body.clientHeight;
document.body.clientWidth;

同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：

window.innerHeight;
window.innerWidth;

参考

  • JAVASCRIPT高级程序设计（第三版）