下面提的Height和Width是基于W3C标准的。
首先提的是clientHeight和clientWidth属性，这个属性返回的值是该属性作用的元素的高度+上下内边距-滚动条宽度或者宽度+左右内边距-滚动条宽度，不包括边框、外边距和滚动条。但是在ie5却不是这个结果。ie5的clientHeight和clientWidth等于该元素的高度减上下边框减滚动条宽度或者宽度减左右边框减滚动条宽度。clientWidth和clientHeight反映的是可视区的值，测试代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8'>
<style type="text/css">
#a{
position: absolute;
width: 130px;
height: 130px;
background-color: red;
overflow: auto;
padding: 10px;
margin: 10px;
border: 3px solid black;
}
</style>
</head>
<body>
<div id='a'>aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
<script type="text/javascript">
var a = document.getElementById('a')
console.log(a.clientHeight)
console.log(a.clientWidth)
</script>
</html>然后是offsetHeight和offsetWidth。offsetHeight和offsetWidth的值等于该元素的高度+上下内边距+上下边框或者宽度+左右内边距+左右边框，也可以换过来想，offsetHeight和offsetWidth的值等于clientHeight+上下边框+滚动条宽度或者clientWidth+左右边框+滚动条宽度。而ie5则刚好等于width或者Height。
然后是scrollHeight和scrollWidth。scrollWidth和scrollHeight返回的值是元素滚动的宽度和高度。在不同浏览器里，返回的值不同。这是因为在不同浏览器里默认的字体大小和行高等缺省样式不同。
然后是scrollTop和scrollLeft。scrollTop和scrollLeft表示的是元素的最顶端与可视区的最顶端的距离或者最左端与可视区的最左端的距离。这里有多个最，那么先解释清楚这里面的关系。可视区就是你将滚动条滚动到某个位置的时候你能看到的区域就是可视区，可视区包含在整个元素内容里。
offsetTop和offsetLeft，它们分别表示为获取元素相对于版面或者由offsetParent属性指定的计算顶部或者左侧的位置。
事件里的clientX和clientY表示的是鼠标在可视区内的坐标。
最后一幅图解决问题：
2827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
