HTML文档类型详解 推荐

所属分类: 网页制作 / HTML/Xhtml 阅读数: 325
收藏 0 赞 0 分享

我的是:<!DOCTYPE html>

博客园:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

关于HTML文档类型参考:http://i.wanz.im/2010/05/28/why_doctype_html/

检查发现JS在获取当前页面可视大小,和页面滚动位置有差别!
在页面包含一个2000*2000的DIV是IE和Chrome在不同HTML文档类型测试整理数据如下:
标准:<!DOCTYPE html>
特殊:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

当HTML中未添加HTML文档类型时,默认为特殊模式!

Chrome标准 Chrome特殊 IE标准 IE特殊
document.body.clientTop; 0 0 0 2
document.body.clientLeft; 0 0 0 2
document.body.clientWidth; 473 473 471 471
document.body.clientHeight; 2000 625 2000 604
document.body.scrollTop; 224 289 0 255
document.body.scrollLeft; 315 388 0 278
document.body.scrollWidth; 2005 2005 2005 2010
document.body.scrollHeight; 2010 2010 2000 2005
document.body.offsetTop; 0 0 0 0
document.body.offsetLeft; 0 0 0 0
document.body.offsetWidth; 473 473 471 492
document.body.offsetHeight; 2000 2000 2000 625
document.documentElement.clientTop; 0 0 0 0
document.documentElement.clientLeft; 0 0 0 0
document.documentElement.clientWidth; 473 473 471 0
document.documentElement.clientHeight; 625 2010 604 0
document.documentElement.scrollTop; 0 0 199 0
document.documentElement.scrollLeft; 0 0 241 0
document.documentElement.scrollWidth; 2005 2005 2005 492
document.documentElement.scrollHeight; 2010 2010 2010 625
document.documentElement.offsetTop; 0 0 0 0
document.documentElement.offsetLeft; 0 0 0 0
document.documentElement.offsetWidth; 473 473 492 492
document.documentElement.offsetHeight; 2010 2010 625 625

分析:

页面总宽度:document.body.scrollWidth;
页面总高度:document.body.scrollHeight;
Chrome页面位置:document.body.scrollTop; document.body.scrollLeft;
Chrome标准页面可视区域:document.documentElement.clientWidth; document.documentElement.clientHeight;
Chrome特殊页面可视区域:document.body.clientWidth; document.body.clientHeight;
IE标准页面位置:document.documentElement.scrollTop; document.documentElement.scrollLeft;
IE标准页面可视区域:document.documentElement.clientWidth; document.documentElement.clientHeight;
IE特殊页面位置:document.body.scrollTop; document.body.scrollLeft;
IE特殊页面可视区域:document.body.clientWidth; document.body.clientHeight;
JS代码如下:

复制代码
代码如下:

function getSize() {
var obj = new Object();
obj.allWidth = document.body.scrollWidth;
obj.allHeight = document.body.scrollHeight;
if (-[1, ]) { //非IE
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight;
}
else {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight;
}
} else {
if (document.compatMode === 'CSS1Compat') {
obj.width = document.documentElement.clientWidth;
obj.height = document.documentElement.clientHeight;
obj.top = document.documentElement.scrollTop;
obj.left = document.documentElement.scrollLeft;
}
else {
obj.width = document.body.clientWidth;
obj.height = document.body.clientHeight;
obj.top = document.body.scrollTop;
obj.left = document.body.scrollLeft;
}
}
alert(obj.top);
alert(obj.left);
alert(obj.width);
alert(obj.height);
return obj;
}

注:发现博客园首页的HTML文档类型为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
为什么和随笔展示页不一样呢?

欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]

更多精彩内容其他人还在看

html超级链接a的click事件之后跳转href所指向的地址

需要使用a这个超级链接,而又不使用href来完成跳转,在执行完了onClick事件后,a又去跳转href所指向的地址了,下面由两种不错的解决方法,希望对大家有所帮助
收藏 0 赞 0 分享

html中position的一个小用法使用介绍

想必大家对html中position属性并不陌生吧,使用它可以完成普通标签完成不了的任务,下面有个不错的示例,大家可以参考下
收藏 0 赞 0 分享

用按钮触发事件的方式实现背景色的闪烁效果

实现背景色闪烁效果的方法有很多,本文为大家介绍的是用按钮来实现背景色的闪烁,将下面的这段代码加入到body区域中即可
收藏 0 赞 0 分享

在HTML中如何隐藏某段文字具体该怎么实现

文字隐藏的方法有很多,在本文为大家介绍下在HTML中如何隐藏某段文字,具体该怎么实现,需要的朋友可以了解下
收藏 0 赞 0 分享

通过display或visibility来实现HTML元素的显示与隐藏

需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现,感兴趣的朋友可以了解下本文
收藏 0 赞 0 分享

html table表数据转Json格式示例代码

本文为大家介绍下html table表数据转Json格式,下面有个不错的示例,大家可以参考下
收藏 0 赞 0 分享

HTML中当定义多个class属性时无效的解决方法

为class属性定义多个值,经常会发现定义的样式无效,经测试,在定义多个class值的时候,一定要注意,把自己最喜欢的样式放在后面,否则无效
收藏 0 赞 0 分享

html form表单提交action和url跳转到actiond的区别介绍

form表单的action 与url跳转是不一样的:form表单可以给后台传递数据,url跳转到action只能通过url的参数来传递数据,不懂的朋友可以参考下
收藏 0 赞 0 分享

a标签是否新开一个页面的问题各大网站的打开情况整理

a标签是否新开一个页面的问题,在本文为大家整理了一些各大网站的新页面打开情况,需要的朋友可以参考下
收藏 0 赞 0 分享

如何弹出QQ临时对话框实现不添加好友在线交谈效果

如何不添加好友弹出QQ临时对话框实现在线交谈效果,这样的一个需求,我们真的是太需要了,实现起来也很简单,一行代码即可搞定,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多