原文地址:http://www.alisdn.com/wordpress/?p=1700
关于浏览器的clientHeight、offsetHeight和scrollHeight
在IE、FireFox、Netscape等不同的浏览器里,对于document.body 的 clientHeight、offsetHeight 和scrollHeight 有着不同的含义,比较容易搞混,现整理一下相关的内容:
clientHeight:在上述浏览器中, clientHeight 的含义是一致的,定义为网页内容可视区域的高度,即在浏览器中可以看到网页内容的高度,通常是工具条以下到状态栏以上的整个区域高度,与具体的网页页面内容无关。可以理解为,在屏幕上通过浏览器窗口所能看到网页内容的高度。
offsetHeight:关于offsetHeight,ie和firefox等不同浏览中意义有所不同,需要加以区别。在ie
中,offsetHeight 的取值为
clientHeight加上滚动条及边框的高度;而firefox、netscape中,其取值为是实际网页内容的高度,可能会小于
clientHeight。
scrollHeight:scrollHeight都表示浏览器中网页内容的高度,但稍有区别。在ie里为实际网页内容的高度,可以小于
clientHeight;在firefox 中为网页内容高度,最小值等于
clientHeight,即网页实际内容比clientHeight时,取clientHeight。
clientWidth、offsetWidth 和 scrollWidth 的含义与上述内容雷同,不过是高度变成宽度而已。
若希望clientHeight、offsetHeight和scrollHeight三个属性能取值一致的话,可以通过设置DOCTYPE,启用
不同的 解析器,如:<!DOCTYPE HTML PUBLIC “DTD XHTML 1.0
Transitional”>,设置DOCTYPE后,这三个属性都表示实际网页内容的高度。
通过以下HTML代码,可以了解一下这三个属性的含义:
<!
DOCTYPE HTML PUBLIC ”DTD XHTML 1.0 Transitional”
>
//设置DOCTYPE
<
HTML
>
<
HEAD
>
<
TITLE
>
测试。
</
TITLE
>
</
HEAD
>
<
script
type
=’text/javascript’
>
window.onload
=
function
(){
var
ch
=
document.body.clientHeight;
var
sh
=
document.body.offsetHeight;
var
ssh
=
document.body.scrollHeight;
alert(’clientHeight:’
+
ch
+
‘; offsetHeight:’
+
sh
+
“
; scrollHeight:
“
+
ssh);
}
</
script
>
<
BODY
style
=’margin:0px’
>
<
div
style
=’background-color:#ccc;
height:400px; padding:0px’
>
text
</
div
>
</
BODY
>
</
HTML
>
分享到:
相关推荐
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
除在保密期内的保密论文和在技术保护期限内的论文外,允许论文被查阅和借阅,可以公布(包括以电子信息形式刊登)论文的全部内容或中、英文摘要等部分内容。论文的公布(包括以电子信息形式刊登)授权东南大学研究生...
2、_self : 在自身标签页中打开新网页(默认值) Demo 1、创建一个超链接,内容为 :学子商城,点击时,在自身标签页中 打开 http://www.codeboy.com 2、创建一个超链接,内容为 :学子商城的LOGO,点击时,在新...
5、JS 计算网页内容的宽与高 (浏览器的标准模式与怪异模式) 237 6、JS设置与查看网页的解析模式(值) 249 7、JS判断对象是否已经存在 249 8、CSS设置网页在IE下为灰色显示 250 9、HTML A链接CSS样式 251 10、CSS...
测了各种浏览器没问题,后台人员移值到项目中后,出问题了,当页面超出一屏时,在 chrome和FF下,弹出框不是在当前屏的垂直居中,而是相对于整个网页的居中。 查阅各方资料,所有结论都指出: 1.窗口高度,$(window...
实例068 判断网页请求与FTP请求 86 实例069 判断文件类型 87 实例070 判断字符串是否为数字 89 实例071 验证IP地址的有效性 90 实例072 鉴别非法电话号码 91 4.3 操作字符串 92 实例073 根据标点符号对字符串进行...
模块名称:茶凉专用模块 作者:茶凉 版本:2.0 本模块可以编程更简单...子程序 读内存长整数型, 长整数型, 公开, 从内存中读取长整数型数据,失败返回失败内容 .参数 进程ID, 整数型, , 进程ID .参数 地址, 整数型, , ...
s += " 屏幕可用工作区高度:"+ window.screen.availHeight; s += " 屏幕可用工作区宽度:"+ window.screen.availWidth; //过滤数字 <input type=text onkeypress="return event.keyCode>=48&&event.keyCode||...