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, 则元素内容滚动到了元素顶部.

 

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