js中窗口大小和单个元素大小的计算

1. 窗口的大小即浏览器的大小：

window.innerWidth, window.innerHeight, window.outerHeight, window.outerWidth

在IE9+，Safari，Firefox, Chrome中，outerWidth和outerHeight返回浏览器窗口本身的大小（无论是从最外层的window对象还是从某个框架访问）, innerHeight和innerWidth是指视口的大小，即浏览器可视区域的大小。

在opera中，outerWidth和outerHeight表示页面可见区域的大小（不知道能不能这么说，书上说的是，页面视图容器的大小，待测试）

 

在IE8及更早版本中，没有取得当前浏览器窗口尺寸的属性，不过，它通过DOM提供了页面可见区域的相关信息

在IE，Firefox，Safari，Opera和Chrome中保存了页面视口的信息：

document.documentElement.clientHeight和document.documentElement.clientWidth, 如果是混杂模式则需要使用document.body.clientWidth和document.body.clientHeight。

 

目前测试Firefox和Chrome都有document.body.clientWidth和document.body.clientHeight, 结果是body的设置的高度，如果没有设置则为实际高度，不包括margin的上下8px，也就是16px

 

判断浏览器视口大小的方法

var pageWidth = window.innerWidth,

      pageHeight = window.innerHeight;

if(typeof pageWidth !== "number"){

    if(document.compatMode == "CSS1Compat"){

          pageWidth = document.documentElement.clientWidth;

          pageHeight = document.documentElement.clientHeight;    

     }else{

          pageWidth = document.body.clientWidth;

          pageHeight = document.body.clientHeight;

     }

}

 

Firefox 和Chrome中body的默认margin为8px，所以需要reset样式。否则window.innerWidth会比实际的少16px

 

 

在移动设备上，window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小，而document.documentElement获取的是布局视口，即页面的实际大小。

移动IE浏览器不支持window的那些属性，但是通过document.documentElement.clientWidth和document.documentElement.clientHeight可以获取可见视口的信息，通过document.body可以获取布局视口的信息。

 

判断浏览器滚动的高度：不建议用 “scrollWidth和scrollHeight, scrollTop, scrollLeft”这些，因为存在浏览器兼容问题

问题是在chrome和firefox中取得scrollTop的前缀不同，chrome中用document.body取，而在firefox中，document.body取得的值是0，用document.documentElement取得的值才是正确的。

我们用document.documentElement.

document.documentElement.scrollWidth和document.documentElement.scrollHeight表示body的实际尺寸，目前测试chrome，firefox正确.

判断是否滚动到底部：

var buttom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
if(bottom > 0){
  //do sth
}

 

window.scrollBy(xnum, ynum);

 

高级程序设计第三版，198页

 

2. 元素大小

    a. 偏移量

offsetHeight: 元素在垂直方向上占用空间的大小，以像素计，包括元素的高度，（可见的）水平滚动条的高度，上边框高度，下边框高度和内边距。

offsetWidth: 元素在水平方向上占用空间的大小，以像素计，包括元素的宽度，（可见的）垂直滚动条的高度，左边框高度，右边框高度和内边距。

offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离。

包含元素的引用包含在offsetParent属性中，指据该元素最近的一个具有大小的父元素

clientWidth和clientHeight是不包含border的部分

scrollWidth和scrollHeight，分两种情况，第一种是没有滚动条的时候，和clientWidth和clientHeight 的值是相同的，即不包含border部分。第二种情况是有滚动条的时候，表示元素的实际大小

scrollLeft 和scrollTop 表示隐藏部分的大小，可以修改, 如设置element.scrollTop = 0, 则元素内容滚动到了元素顶部.

 

如有问题，欢迎大家批评指正。

转载于:https://www.cnblogs.com/wenwenli/p/5288098.html