转自：http://www.cnblogs.com/mackxu/archive/2012/12/29/2839396.html
1、浏览器窗口大小
//窗口高度
function getTotalHeight(){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight : document.body.clientHeight;
}
else {
return self.innerHeight;
}
}
//窗口宽度
function getTotalWidth (){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth : document.body.clientWidth;
}
else{
return self.innerWidth;
}
}
每一个HTML元素都有以下属性
| offsetWidth | offsetHeight | offsetLeft | offsetTop |
| clientWidth | clientHeight | ||
| scrollWidth | scrollHeight | scrollLeft | scrollTop |
1. 偏移量(offsetHeight offsetWidth offsetLeft offsetTop)
offsetHeight/offsetWidth: 表述元素的外尺寸：元素内容+内边距+边框(不包括外边距)
offsetLeft/offsetTop: 表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离。
offsetParent元素是指元素最近的定位（relative,absolute）祖先元素,可递归上溯。
/**
* 获取元素在页面中的坐标(x, y)
* @param {Object} e
*/
function getElementPosition(e) {
var x = 0, y = 0;
while(e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return { x: x, y: y };
}
2. 客户区大小(clientWidth clientHeight)
clientWidth/clientHeight: 用于描述元素的内尺寸：元素内容+两边内边距
innerWidth/innerHeight
常用于获取视口的高宽
/**
* 获取视口的大小
* 用法：
* var viewport = getViewportSize();
* viewport.width/viewport.height
* @param {Object} w
*/
function getViewportSize(w) {
var w = w || window;
if(w.innerHeight != null) {
return { w: w.innerWidth, h: w.innerHeight };
}
var d = w.document;
if(document.compatMode == 'CSS1Compat') { //标准模式
return {
width: d.documentElement.clientWidth,
height: d.documentElement.clientHeight
};
}
return { w: d.body.clientWidth, h: d.body.clientHeight };
}
3. 滚动大小(scrollHeight scrollWidth scrollLeft scrollTop)
scrollHeight/scrollWidth: 元素内容的总高度或宽度
scrollLeft/scrollTop：是指元素滚动条位置，它们是可写的(被隐藏的内容区域左侧/上方的像素)
浏览器窗口的滚动条位置：window对象的pageXoffset和pageYoffset, IE 8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置
/**
* 获取滚动长度
* 滚动条向下滚动被隐藏的页面长度
* 通用的scrollLeft和scrollTop
* @param {Object} w
*/
function getScrollOffset(w) {
var w = w || window;
//Firefox
if(w.pageXOffset != null) {
return { x: w.pageXOffset, y: w.pageYOffset };
}
var d = w.document;
if(document.compatMode == 'CSS1Compat') { //标准模式
return {
x: d.documentElement.scrollLeft,
y: d.documentElement.scrollTop
};
}
//
return { x: d.body.scrollLeft, y: d.body.scrollTop };
}