本文详细解析JavaScript中scrollHeight、clientHeight与offsetHeight的区别，涵盖有/无滚动条时的数值变化规律。同时提供获取页面可视区宽高、元素实际尺寸及滚动位置的兼容写法，重点说明IE6-10与Firefox在offsetParent计算上的差异，帮助开发者准确处理页面布局与滚动逻辑。
scrollHeight、clientHeight与offsetHeight的区别
scrollHeight、clientHeight与offsetHeight的区别
具体说明如下：
scrollHeight表示DOM元素内部实际内容的完整高度，不包含边框（border）的高度。当元素内的内容超出可视区域时，该值会随内容增加而变大。
clientHeight表示DOM元素内容可视区域的高度，不包含滚动条和边框的高度。
offsetHeight表示DOM元素的整体高度，计算时包含滚动条和边框的高度。
当页面未出现滚动条时：
此时DOM元素内的内容较少或未超出可视区域。scrollWidth等于clientWidth，两者均代表可视区的宽度；scrollHeight等于clientHeight，两者均代表可视区的高度。而offsetWidth和offsetHeight则代表DOM元素的整体宽度和高度（含边框等）。
当页面出现滚动条时：
即使内容未填满可视区，若触发滚动条显示，则scrollWidth大于clientWidth，scrollHeight大于clientHeight。其中，scrollWidth和scrollHeight分别代表实际内容的宽度和高度；clientWidth和clientHeight代表内容可视区的宽度和高度；offsetWidth和offsetHeight仍代表DOM元素的整体宽度和高度。
利用JS获取DOM元素的大小
示例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>正确理解和运用与尺寸大小相关的DOM属性</title>
<style type="text/css">
html,body {margin: 0;}
body {padding: 100px;}
#box {
overflow: scroll;
width: 400px;
height: 300px;
padding: 20px;
border: 10px solid #000;
margin: 0 auto;
box-sizing: content-box;
/*
box-sizing:content-box表示元素的宽度与高度不包括内边距与边框的宽度和高度
box-sizing:border-box表示元素的宽度与高度包括内边距与边框的宽度和高度
*/
}
#box2 {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="box">
<div id="box2">谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果谷歌浏览器测试结果</div>
</div>
<script type="text/javascript">
//offsetWidth ，offsetHeight对应的是盒模型的宽度和高度
//scrollWidth，与scrollHeight对应的是滚动区域的宽度和高度，但是不包含滚动条的宽度！滚动区域由padding和content组成。
//clientWidth，clientHeight对应的是盒模型除去边框后的那部分区域的宽度和高度，不包含滚动条的宽度
var boxE=document.getElementById("box");
var box=document.getElementById("box2");
//对于scrollWidth没有发生横向的溢出，同时由于overflow: scroll的原因，scrollWidth 跟clientWidth相同，但是没有包含滚动条的宽度
console.log('scrollWidth:' + boxE.scrollWidth);//423
console.log('scrollHeight:' + boxE.scrollHeight);//672
//clientWidth与clientHeight分别等于offsetWidth与offsetHeight减掉相应边框（上下共20px，左右共20px）和滚动条宽度后的值（chrome下滚动条宽度为17px）；
console.log('clientWidth:' + boxE.clientWidth);//423=460-20-17
console.log('clientHeight:' + boxE.clientHeight);//323=360-20-17
//offsetWidth与offsetHeight与chrome审查元素看到的尺寸完全一致
console.log('offsetWidth :' + boxE.offsetWidth);//460=width+padding+border
console.log('offsetHeight:' + boxE.offsetHeight);//360=height+padding+border
</script>
</body>
</html>利用JavaScript获取DOM元素的大小尺寸
获取HTML根元素可使用document.documentElement，获取body元素则使用document.body。
获取页面可视区的宽度和高度（不包含滚动条）。在IE、Firefox和Chrome浏览器中，通常采用document.documentElement.clientWidth和document.documentElement.clientHeight。需要注意的是，在IE6的标准模式下，上述方式可以正常生效。
在混杂模式（Quirks Mode）下：IE6需要使用document.body.clientWidth和document.body.clientHeight。此外，window.innerWidth/Height返回的是包含滚动条的宽度和高度，这与document.documentElement.clientWidth/Height存在区别。因此，在实际开发中应注意编写兼容代码：
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面视口宽高</title>
</head>
<body>
<script type="text/javascript">
//标准模式
var w=document.documentElement.clientWidth;
var h=document.documentElement.clientHeight;
console.log('w宽：'+w+'---'+'h高：'+h);
//混杂模式
var width=document.body.clientWidth;
var height=document.body.clientHeight;
//兼容写法
var ww=document.documentElement.clientWidth||document.body.clientWidth;
var hh=document.documentElement.clientHeight||document.body.clientHeight;
console.log('ww宽：'+ww+'---'+'hh高：'+hh);
</script>
</body>
</html>获取普通HTML元素的大小尺寸
通过docE.offsetWidth和docE.offsetHeight即可获取。
获取滚动条滚动的垂直高度（需进行兼容性处理）
var oTop=document.documentElement.scrollTop||document.body.scrollTop;
offsetWidth与offsetHeight的计算
关于offsetWidth与offsetHeight
这两个属性表示元素的可视区宽度和高度，其值包括元素的边框（border）、水平padding、垂直滚动条的宽度或高度以及元素本身的宽度或高度。
offsetWidth与offsetHeight的值仅与该元素自身相关，与周围元素（包括父级和子级元素）无关。计算公式为：offsetWidth = (border-width)*2 + (padding-left) + (width) + (padding-right)。
同理，offsetHeight = (border-width)*2 + (padding-top) + (height) + (padding-bottom)。
offsetLeft与offsetTop的定位规则
关于offsetLeft与offsetTop
offsetLeft与offsetTop这两个属性的值取决于offsetParent。
offsetParent属性返回一个对象引用，该对象是距离调用offsetParent的元素最近的、且在包含层次中最靠近的、并已进行过CSS定位（position不为static）的容器元素。如果该容器元素未进行CSS定位，则offsetParent属性的取值为根元素（即body元素）的引用。
遵循以下两条规则：
如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），则offsetParent为body。
如果当前元素的父级元素中有CSS定位（position为absolute或relative），则offsetParent取最近的那个已定位的父级元素。
offsetLeft表示对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。
offsetTop表示对象元素边界的左上角顶点相对于offsetParent的左上角顶点的垂直偏移量。
计算公式为：offsetLeft = (offsetParent的padding-left) + (中间元素的offsetWidth) + (当前元素的margin-left)。
同理，offsetTop = (offsetParent的padding-top) + (中间元素的offsetHeight) + (当前元素的margin-top)。
当offsetParent为body时，情况较为特殊：
在IE8、IE9、IE10及Chrome浏览器中：offsetLeft = (body的margin-left) + (body的border-width) + (body的padding-left) + (当前元素的margin-left)。
在FireFox浏览器中：offsetLeft = (body的margin-left) + (body的padding-left) + (当前元素的margin-left)。
以上即为JavaScript中获取位置与大小的完整方法总结。