正文
HTML 元素大小
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
offsetHeight ,offsetWidth ,offsetLeft offsetTop clientWidth clientHeight scrollHeight scrollWidth scrollLeft scrollTop，返回的都是纯数字
1、元素的偏移量
元素的可见大小是由其高度、宽度决定，包括所有的内边距、滚动条和边框大小（不包括外边距）。
offsetHeight ：元素在垂直方向上占用的空间大小，以像素计算。包括元素的高度，水平滚动条高度，上下边框高度。
offsetWidth ：元素在水平方向上占用的空间大小，以像素计算。 包括元素的宽度，垂直滚动条高度，左右边框高度。
offsetLeft ：元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop ：元素的上外边框至包含元素的上内边框之间的像素距离。
offsetParent ：元素的包含元素，找离自己最近有定位的父元素。元素的offsetParent不一定和parentNode相等。例如，<td>元素的offsetParent是祖先元素<table>，因为<table>是在DOM层次中距离<td>最近的一个具有大小的元素。
返回一个指向最近的（指包含层级上的最近）
包含该元素的定位元素或者最近的
table,
td,
th,
body
元素
。当元素的
style.display
设置为 "none" 时，
offsetParent
返回
null
。
offsetParent
很有用，因为
offsetTop
和
offsetLeft
都是相对于其内边距边界的。
偏移量属性是只读属性，每次访问都需要重新计算。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current != null){ // 循环至根元素 body
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while(current != null){ // 循环至跟元素 body
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
上述两个方法在简单的页面布局中，结果很准确，但对于使用表格和内嵌框架布局的页面，不同浏览器实现不同，结果也会有些不同。
function getElementTopToRoot(element,root){
if(root != undefined && element == root){
return 0;
}
if(root == undefined){
root = null
}
var actualTop = element.offsetTop;
var current = element.offsetParent;
while(current != root && current != null){ // 循环至根元素
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
function getElementLeftToRoot(element,root){
if(root != undefined && element == root){
return 0;
}
if(root == undefined){
root = null
}
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while(current != root && current != null){ // 循环至根元素
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
2、元素的客户区大小
元素的客户区大小值得是元素内容及其内边距所占据的空间大小，不计滚动条所占空间。
clientWidth ：元素内容区宽度加左右内边距的宽度
clientHeight ：元素内容区高度加上下内边距的高度
这个最常用来确定浏览器视口的大小。客户区大小是只读属性，每次访问都需要重新计算。
3、滚动大小
滚动大小指的是包含滚动内容的元素大小。
scrollHeight ：滚动元素高度，没有滚动条的情况下，是元素内容的总高度
scrollWidth ：滚动元素的宽度，没有滚动条的情况下，是元素内容的总宽度
scrollLeft ：被隐藏在内容区左侧的宽度，可读可设置
scrollTop ：被隐藏在内容区上方的高度，可读可设置
//获取文档总高度/总宽度
function getPageDimension(){
if(document.compatMode == "BackCompat"){ // 混杂模式
return {
width:Math.max(document.body.scrollWidth,document.body.clientWidth),
height:Math.max(document.body.scrollHeight,document.body.clientHeight)
};
} else {
return {
width:Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
height:Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
}
}
}
//将元素回滚到顶部
function scrollToTop(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
4、元素大小
IE、Firefox、Safari、Opera、Chrome为每个元素都提供了一个getBoundingClientRect() 方法。返回一个矩形对象，表示元素相对于视口的位置，有四个属性：
left：元素左边框至视口的左侧的距离
right：元素右边框至视口左侧的距离
top：元素上边框至视口上侧的距离
bottom：元素下边框至视口上侧的距离
所以，right - left 是元素的宽度，bottom - top 是元素的高度
function getBoundingClientRect(element){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if(element.getBoundingClientRect){
if(typeof arguments.callee.offset != "number"){
var temp = document.createElement("div"); // IE8 - 中文档左上角的坐标是（2，2），其他是（0，0）
temp.style.position = "absolute";
temp.style.left = "0px";
temp.style.top = "0px";
//temp.style.cssText = "position:absolute;left:0;top:0";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left:rect.left + offset,
right:rect.right + offset,
top:rect.top + offset,
bottom:rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left:actualLeft - scrollLeft,
right:actualLeft + element.offsetWidth - scrollLeft,
top:actualTop - scrollTop,
bottom:actualTop + element.offsetHeight - scrollTop
}
}
}
