JS高程12.2.3元素大小的学习笔记
《JavaScript高级程序设计》中讲述了通过JS如何控制页面中元素的大小，其中涉及到三对属性：偏移量，客户区大小，滚动大小。以前自己经常看到这三对属性，但是具体不是很清楚，容易混淆。所以想写篇文章记录一下自己的学习收获，让自己理解的更加深刻，同时也请各位前辈帮忙指正一下自己理解错误的地方。
首先元素在屏幕上的可见大小由元素的宽度，高度决定，包括所有内边距，滚动条和边框大小（不包括外边距）
1.偏移量
偏移量中包括如下四个属性：
1.offsetHeight：元素在垂直方向上占用的空间大小，以像素计，包括元素的高度，（可见的）水平滚动条的高度，上边框高度和下边框高度
2.offsetWidth：元素在水平方向上占用的空间大小，以像素计，包括元素的宽度，（可见的）垂直滚动条的宽度，左边框宽度和右边框宽度
3.offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离
4.offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离
下图形象的展示了上述四个属性表示的大小和距离
注意点：偏移量属性都是只读的，而且每次访问都需要重新计算，所以尽量避免重复访问这些属性，如果需要重复访问，可以将某个属性保存在局部变量中，以提高性能。
2.客户区大小
客户区大小指的是元素内容和其内边距占据的空间大小。有关客户区大小的属性有如下两个：
1.clientWidth：元素内容区宽度加上左右内边距宽度
2.clientHeight：元素内容区高度加上上下内边距高度
下图展示了上述的属性：
注意点：1.clientWidth（clientHeight）与offsetWidth（offsetHeight）的区别是不包括边框和滚动条
2.客户区大小与偏移量一样也是只读的，每次访问也需要重新计算
3.滚动大小
1.scrollHeight：在没有滚动条的情况下，元素内容的总高度
2.scrollWidth：在没有滚动条的情况下，元素内容的总宽度
3.scrollLeft：被隐藏在内容区域左侧的像素数，通过设置这个属性可以改变元素的滚动位置
4.scrollTop：被隐藏在内容区上方的像素数，通过设置这个属性可以改变元素的滚动位置
下图展示了这些属性：
注意点：1.通常认为<html>元素是在Web浏览器的视口中滚动的元素（IE6之前版本运行在混杂模式下是<body>元素），所以带有垂直滚动条的页面总高度是document.documentElement.scrollHeight。
2.偏移量，客户区大小和滚动大小返回的值只是一个数值，不带有单位，与style属性的width/height属性不同。
3.在确定文档的总高度时（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果
在本节中涉及到的一些代码片段
1.获取某个元素相对于页面根元素的偏移量
//获取元素的左偏移量
function getElementLeft(element) { var actualLeft=element.offsetLeft; var current=element.offsetParent; while(current!==null){ actualLeft+=current.offsetLeft; current=current.offsetParent; } return actualLeft; }
//获取元素的上偏移量
function getElementLeft(element) {
var actualTop=element.offsetTop;
var current=element.offsetParent;
while(current!==null){
actualLeft+=current.offsetTop;
current=current.offsetParent;
}
return actualTop;
}
2.获取浏览器视口大小
//获取浏览器视口大小
function getViewport(){
if (document.compatMode=="BackCompat") {
return {
width:document.body.clientWidth,
height:document.body.clienrHeight
};
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clienrHeight
};
}
}
3.取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值
//取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值 var docHeight=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); var docWidth=Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
4.重置元素的滚动位置
//重置元素的滚动位置
function scrollToTop(element){
if (element.scrollTop!=0) {
element.scrollTop=0;
}
}
