我们来实现test中的onclick事件
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,1000px.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.clientHeight);
alert(test3.clientHeight);
alert(test2.clientHeight)
alert(test.clientHeight);
alert(document.body.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.scrollHeight);
alert(test3.scrollHeight);
alert(test2.scrollHeight)
alert(test.scrollHeight);
alert(document.body.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.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下如上所述.
//iframe自适应高
function reinitIframe(){
var iframe = document.getElementById("frame_main");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
转载自:http://www.cnblogs.com/yuteng/articles/1894578.html
分享到:
相关推荐
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传...其计算方式为clientHeight = topPadding + bottomPadding+ height – scrollbar.height。 offsetHeight在IE6,IE7,IE8以及最新的的FF, Chr
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不 值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个...
尺寸相关:offsetHeight、clientHeight、scrollHeight; 偏移相关:offsetTop、clientTop、scrollTop、pageYOffset、scrollY; 获取相对视口位置:Element.getBoundingClientRect(); 获取元素的style对象:...
clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条...
scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF ...(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等……这么多,傻傻分...
关于clientHeight、offsetHeight、scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) ...
网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body....
iframe.height = Math.max( iframe.contentDocument.body.scrollHeight || 0, iframe.contentDocument.body.offsetHeight || 0, iframe.contentDocument.clientHeight || 0, iframe.contentDocument....
有这张图就够了,简单地说明一下 以Height为例,Width同理: div.clientHeight:可见窗口除去了margin+border之后的长度。 div.offsetHeight:在div.clientHeight的基础上加了border和滚动条的长度。 div....
实例如下所示: $[removed](scroll, function () ... var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; //隐藏的高度 var scrollHeight = w
s += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; s += " 网页正文全文宽:"+ document.body.scrollWidth; s += " 网页正文全文高:"+ document.body.scrollHeight; s += " 网页被卷去...
javascript函数的解释,解释了具体函数的功能,一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// ...4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document...