先简单瞅瞅他们！贼恐怖！
搞起来！
div4 div3 div2 div 依次设置height 700px, 550px,600px,500px,1000px
除了test4这个div外,其他的div均有设置border=1px；
function justAtest()
{
var test=document.getElementById("test");
var test2=document.getElementById("test2");
var test3=document.getElementById("test3");
var test4=document.getElementById("test4");
alert(test4.style.height);
alert(test3.style.height);
alert(test2.style.height);
alert(test.style.height);
alert(document.body.style.height);
}
height :
其实Height高度跟其他的高度有点不一样,在javascript中它是属于对象的style对象属性中的一个成员,它的值是一个字符串类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height
上面的脚本将依次弹出700px,550px,600px,500px
height是最简单的,不必去考虑是否有滚动条及边框等.因此也不做多解释了.
function justAtest()
{
var test=document.getElementById("test");
var test2=document.getElementById("test2");
var test3=document.getElementById("test3");
var test4=document.getElementById("test4");
alert(test4.style.clientHeightt);
alert(test3.style.clientHeight);
alert(test2.style.clientHeight);
alert(test.style.clientHeight);
alert(document.body.style.clientHeight);
}
运行后火狐的结果为:700,550,583,483,1000
IE的结果为:700 ,550,583,483,1000
IE与火狐下的运行结果是一致的.下面来看下clientHeight的定义.
clientHeight:
可见区域的高度,不包括boder的高度,如果区域内带有滚动条,还应该减去竖向滚动条不可用的高度,正常的是17px,其实就是滚动条的可滚动的部分了,其实clientHeight与height的高度差不多,如果不带滚动条的话他们的值都是一样的,如果带有滚动条的话就会比height值少17px;火狐与IE下均为一致.
接着我们来看scrollHeight
function justAtest()
{
var test=document.getElementById("test");
var test2=document.getElementById("test2");
var test3=document.getElementById("test3");
var test4=document.getElementById("test4");
alert(test4.style.scrollHeight);
alert(test3.style.scrollHeight);
alert(test2.style.scrollHeight);
alert(test.style.scrollHeight);
alert(document.body.style.scrollHeight);
}
运行后火狐的结果为:700,552,700,602,1002
IE的结果为: 15, 15 , 700,602, 552
scrollHeight:
这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..
在火狐下还很好理解,它其实就是滚动条可滚动的部分还要加上boder的高度还要加上横竖向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
在IE中 scrollHeight确是指这个对象它所包含的对象的高度加上boder的高度和marging,如果它里面没有包含对象或者这个对象的高度值未设置,那么它的值将为15
最后我们来看offsetHeight
function justAtest()
{
var test=document.getElementById("test");
var test2=document.getElementById("test2");
var test3=document.getElementById("test3");
var test4=document.getElementById("test4");
alert(test4.style.offsetHeight);
alert(test3.style.offsetHeightt);
alert(test2.style.offsetHeight);
alert(test.style.offsetHeight);
alert(document.body.style.offsetHeight);
}
