获取浏览器视口宽高以及元素宽高

适用所有浏览器

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var w = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer9、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight; // 浏览器窗口的内部高度
window.innerWidth; // 浏览器窗口的内部宽度

对于 ie 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth
//或者
document.body.clientHeight
document.body.clientWidth

获取页面总高度和宽度，以及scrollTop d的兼容处理；

// clientWidth 处理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}
// scrollTop兼容性处理
function getScrollTop() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

获取元素的宽高

// 对应的dom元素的宽高有以下几个常用的：
document.getElementById("div").offsetHeight; // 元素的实际高度
document.getElementById("div").offsetWidth;  // 元素的实际宽度
document.getElementById("div").offsetLeft;  // 元素的实际距离左边界的距离
document.getElementById("div").offsetTop // 元素的实际距离上边界的距离