JavaScript中关于获取可视口尺寸以及元素尺寸的一些总结

查询窗口的可视口尺寸

可视口指的是浏览器中实际显示文档内容的部分，它不包括浏览器的“外壳”（如菜单、工具条和标签页）。
非IE浏览器存在属性innerWidth和innerHeight可以返回窗口的可视口尺寸，IE浏览器不支持这两个属性，可以通过DOM提供页面可视区域属性clientWidth和clientHeight，这两个属性对非IE浏览器也同样适用，但是要区分标准模式和怪异模式，代码如下：

//获取浏览器可视口大小
function getViewPortSize() {
     if (typeof window.innerWidth === "number") {
         return {
             width: window.innerWidth,
             height: window.innerHeight
         };
     } else { //IE浏览器，不支持innerWidth属性，同样适用于其他非IE浏览器
         if (document.compatMode === "CSS1Compat") {//标准模式
             return {
                 width: document.documentElement.clientWidth,
                 height: document.documentElement.clientHeight
             };
         } else {  //怪异模式
             return {
                 width: document.body.clientWidth,
                 height: document.body.clientHeight
             };
         }
     }
 }

getViewPortSize()返回一个对象，可以通过以下形式输出浏览器的可视区尺寸：

alert("width:"+getViewPortSize().width+"  height:"+getViewPortSize().height);

关于元素尺寸、位置和溢出的一些属性总结

1、offsetWidth和offsetHeight
offsetWidth和offsetHeight返回元素的实际大小，包括边框、内边距和滚动条；
2、offsetLeft和offsetTop
offsetLeft和offsetTop返回该元素的左上角坐标（x，y），若该元素是某个元素的后代元素，返回该元素相对于其父元素的坐标，而不是相对于整个页面的坐标。
3、offsetParent
offsetParent属性指定上面属性所相对的父元素。若想得到某个元素相对于页面的偏移量（坐标），可以将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，循环直至根元素。

function offsetTop(element){
    var top = element.offsetTop;
    var parent = element.offsetParent;

    while(parent !== null){
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}
function offsetLeft(element){
    var left = element.offsetLeft;
    var parent = element.offsetParent;

    while(parent !== null){
        left += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return left;
}

4、clientWidth和clientHeight
类似于上面提到的offsetWidth和offsetHeight，但是它不包括边框大小，只包含内容和内边距；若在根元素上查询这些属性，返回值和窗口的innerWidth和innerHeight属性值相等，参看本文档最上面提到的查询窗口的可视口尺寸，返回的是窗口的可视区 大小；
内联元素的clientWidth和clientHeight总是返回0.
5、clientLeft和clientTop
返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，其实返回的就是边框的宽度；但若有滚动条，且滚动条放置在左侧或顶部（不常见，一般都在右侧或底部），返回值就要包含滚动条的宽度。内联元素的clientLeft和clientTop总是返回0.
6、scrollWidth和scrollHeight
元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容没有溢出时，这些属性和clientWidth和clientHeight是相等的，但当内容溢出时，它们就包含溢出的内容，返回值大于clientWidth和clientHeight。
7、scrollLeft和scrollTop
这两个元素可以获取和设置滚动条的位置。

查询元素的几何尺寸

每个元素都有getBoundingClientRect()方法，这个方法返回一个矩形对象，包含4个属性left、top、right和bottom，这些属性给出了元素在页面中相对于视口的位置。left和top表示元素的左上角的x和y坐标，right和bottom表示元素的右下角的x和y坐标。这个方法返回的对象还包含width和height属性，但原始IE未实现，兼容版本如下：

var box = element.getBoundingClientRect();
var w = box.width || (box.right-box.left);
var h = box.height || (box.bottom-box.top);

getBoundingClientRect()返回的是一个矩形对象，这个对象是类数组，但这个类数组并不像getElementsByTagName()返回的类数组一样是实时的，这个类数组并不是实时的，它们只是调用方法时文档视觉状态的静态快照，在用户滚动或改变浏览器窗口大小时不会更新它们。