height、clientHeight、scrollHeight、offsetHeight区别

1.top此属性仅仅在对象的定位(position)属性被设置时可用。否则，此属性设置会被忽略。复制代码代码如下:<div style="background-color:red;
position:absolute; width:100px; height:100px;">
<p
style=" position:absolute; top:-5px;">测试top</p></div>上面是一个段落P包含在一个DIV内，可以看到P的top设置为-5px后，它的上边距超过了容器DIV的上边距，超过的这段距离就是设置的5px。需要注意的是，DIV和P这一对包含元素，都需要设置position为absolute才能得到想要的结果，假如父元素不设置，则子元素的参照将是更上层定义过position的元素，直到整个文档；2.posTopposTop的数值其实和top是一样的，但区别在于，top固定了元素单位为px，而posTop只是一个数值,一般使用posTop来进行运算。3.scrollTop复制代码代码如下:<div id="container"
style=" width:100px; height:100px; overflow:auto;"><p style="" mce_style="">这里是文本
</p>
</div>
<script
type="text/javascript"><!--
container.scrollTop = 12;
//
--></script>这一段文本在这个100*100的DIV内无法完全显示，所以设置了overflow为auto，它会出现一个上下方向的滑动框，假如没有设置
id.scrollTop属性的话，默认情况下滑块位置在顶端。而设置了scrollTop值为12后，滑块的位置改变了，默认显示是卷过了12个象素的文本。如果设置overflow为hidden，则将会无法显示顶部12个象素的文本。注意设置方式是id.scrollTop，而不是id.style.scrollTop。4.offsetTop如果元素 A 是 HTML 的 body 元素，其 display 属性计算值是 none，或者不具有 CSS 布局盒子，则返回
0，并停止本算法。如果元素 A 的 offsetParent 是 null 或者是 HTML 的 body 元素，以 CSS
像素为单位返回元素 A 上边框距画布原点的垂直距离，并停止本算法。以 CSS 像素为单位返回元素 A 上边框距其 offsetParent
上边框的距离。
function justAtest()
function justAtest()
function justAtest()
function justAtest()
{
var test= document.getElementById("test");
var test2=document.getElementById("test2")
var test3=document.getElementById("test3")
var test4=document.getElementById("test4");
alert(test4.offsetHeight);
alert(test3.offsetHeight);
alert(test2.offsetHeight)
alert(test.offsetHeight);
alert(document.body.offsetHeight)
}offsetHeight:
FF:700,552,602,502,1002
IE:700,552,602,502,1002
这个属性好办,因为在测试中IE跟火狐的结果是一样的,均表示是自身的高度,如果有设置boder的话还应该加上boder的值,因为除了test4这个div外,其他的div均有设置border=1px,所以552=550+2,其他的均一样.嘿嘿,综上所述,clientHeight与height的区别是如果有滚动条时应减去滚动条的17px不可用部分,offsetHeight与Height的区别是增加了boder的高度,ScrollHeihgt与Height的区别是火狐下与offsetHeight一致,IE下如上所述.相信你了解了这个,对width,clientWidth,scrollWidth,offsetWidth已经不陌生了吧,只不过一个是长一个是宽的问题了.jquery

在jQuery中，width()方法用于获得元素宽度；innerWidth()方法用于获得包括内边界（padding）的元素宽度，outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度，如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。同理，innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说：对于同一个元素应该是：width()<=innerWidth()<=outerWidth()<=outerWidth(true);

再给你一个实例，前提是正确导入jQuery，即可运行。
代码中将p元素的宽度设计为200px；运行会输出200、220、240、260。

<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("#p_obj");
alert(obj.width());
alert(obj.innerWidth());
alert(obj.outerWidth());
alert(obj.outerWidth(true));
});
});
</script>
<p id="p_obj" style=" width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button>