!DOCTYPE声明对JavaScript的影响分析


Posted in Javascript onApril 12, 2010

要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效;当然对JS的取值也会有影响。

DOCTYPE声明如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE声明包括:过渡型(Transitional),严格型(Strict)和框架型(Frameset)。接下来就看一下这三种类型对不同浏览器在获取元素相关信息时的影响(包括不定义DOCTYPE和只将DOCTYPE定义为<!docType>形式),我测试的浏览器分别为:IE6.0、IE7.0、IE8.0(变态模式)、FF、Opera、Chrome和Safari。由于IE5.5已经几乎被淘汰,所以不在测试范围之内。

以下就是测试结果(滚动条只是元素本身的滚动条并不是窗口的):

一、过渡型(Transitional)

1、测试IE6.0、IE7.0与IE8.0(非变态模式Quirks)的宽度和高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘width']
有无滚动条均为:offsetWidth=paddingLeft+paddingRight+borderLeft+borderRightoffsetHeight=paddingTop+paddingBottom+borderTop+boderBottom 1、无滚动条clientWidth=CSS中定义的宽度+paddingLeft+paddingRightclientHeight=CSS中定义的高度+paddingTop+paddingBottom(均不包括边框宽度)2、有滚动条clientWidth=CSS中定义的宽度-滚动条宽度(17固定值)-边框宽度,clientHeight=CSS中定义的高度-滚动条宽度(17固定值)-边框宽度 实际真实宽度,不包括padding与边框值(除IE和Opera以外无此属性)
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为:offsetLeft=对象的offsetLeft-边框offsetTop=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

2、测试IE8.0变态模式(Quirks)的宽度与高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘height]
1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=CSS中定义的数值 1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=当前对象在CSS中定义的数值-滚动条(17) 有无滚动条均为:宽度和高度均为CSS中定义的数值
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为: offsetLeft(offsetTop)=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

3、FF、Opera、Safari和Chrom中所取得的数值与第一种情况一样。

二、严格型(Strict)

1、测试IE6.0、IE7.0与IE8.0(非变态模式Quirks)的宽度和高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘width']
有无滚动条均为:offsetWidth=paddingLeft+paddingRight+borderLeft+borderRightoffsetHeight=paddingTop+paddingBottom+borderTop+boderBottom 1、无滚动条clientWidth=CSS中定义的宽度+paddingLeft+paddingRightclientHeight=CSS中定义的高度+paddingTop+paddingBottom均不包括边框宽度2、有滚动条clientWidth=CSS中定义的宽度-滚动条宽度(17固定值)-边框宽度,clientHeight=CSS中定义的高度-滚动条宽度(17固定值)-边框宽度 实际真实宽度,不包括padding与边框值(除IE和Opera以外无此属性)
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为:offsetLeft=对象的offsetLeft-边框offsetTop=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

2、测试IE8.0变态模式(Quirks)的宽度与高度(width,height)

offsetWidth,offsetHeight clientWidth,clientHeight currentStyle[‘width'],currentStyle[‘height]
1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=CSS中定义的数值 1、(无滚动条)宽度(高度)=当前对象的实际数值2、(有滚动条)宽度(高度)=当前对象在CSS中定义的数值-滚动条(17)-边框宽度 有无滚动条均为:宽度和高度均为CSS中定义的数值(除IE和Opera以外无此属性)
offsetLeft,offsetTop clientLeft,clientTop currentSytle[‘left'],currentStyle[‘top']
有无滚动条均为: offsetLeft(offsetTop)=实际值 有无滚动条均为:边框的宽度 除IE和Opera以外无此属性

3、FF、Opera、Safari和Chrom中所取得的数值与第一种情况一样。

三、取消DOCTYPE声明

1、IE6.0、IE7.0在没有DOCTYPE声明时与IE8.0中的变态模式(Quirks)中严格型结果相同。

2、FF、Safari、Chrome和IE8.0标准模式是与过渡型结果相同。

3、Opera浏览器中,在元素没有滚动条时offsetHeight与clientHeight的取值是在其当前现实的大小。

四、将DOCTYPE声明改写为<!docType>

1、IE6.0、IE7.0在没有DOCTYPE声明时与IE8.0中的变态模式(Quirks)中严格型结果相同。

2、FF、Safari、Chrome和IE8.0标准模式是与过渡型结果相同。

3、Opera浏览器中,在元素没有滚动条时offsetHeight与clientHeight的取值是在其当前现实的大小。

在Opera中也拥有与IE一样的属性“currentStyle”,所以在Opera中也可以使用currentStyle来取得元素的精确值。

Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
vue服务端渲染添加缓存的方法
Sep 18 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 #Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 #Javascript
javascript cookies操作集合
Apr 12 #Javascript
javascript 数组学习资料收集
Apr 11 #Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 #Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 #Javascript
javascript dom 基本操作小结
Apr 11 #Javascript
You might like
php文件下载处理方法分析
2015/04/22 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
javascript中this指向详解
2016/04/23 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
python 6种方法实现单例模式
2020/12/15 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
世界文化遗产导游词
2015/02/13 职场文书
活动总结书怎么写
2015/05/11 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers