!DOCTYPE声明对JavaScript的影响分析

更新时间：2010年04月12日 17:59:53 作者：

DOCTYPE是document type(文档类型)的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。

要建立符合标准的网页，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+borderRight offsetHeight= paddingTop+paddingBottom+borderTop+boderBottom	1、无滚动条 clientWidth=CSS中定义的宽度+paddingLeft+paddingRight clientHeight=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+borderRight offsetHeight= paddingTop+paddingBottom+borderTop+boderBottom	1、无滚动条 clientWidth=CSS中定义的宽度+paddingLeft+paddingRight clientHeight=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来取得元素的精确值。

您可能感兴趣的文章:

js中关于一个分号的崩溃示例
下面的js代码不管if条件的结果是true还是false都会执行大括号的代码，结果发现if条件括号后面多写了分号，崩溃啊
2013-11-11
js中class的点击事件没有效果的解决方法
下面小编就为大家带来一篇js中class的点击事件没有效果的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
Javascript+CSS实现影像卷帘效果思路及代码
Arcmap里面的一个卷帘效果肯定记忆很深刻，我也对这种比较炫的卷帘效果做了一下研究，现在给大家汇报下结果
2014-10-10
javascript的23种设计模式示例总结大全
这篇文章主要为大家介绍了javascript的23种设计模式的总结大全，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
BootStrap Fileinput的使用教程
bootstrap-fileinput是基于bootstrap的上传控件。此控件在网上可以找到很多例子，接下来通过本文给大家分享bootstrap fileinput的使用教程，非常不错，感兴趣的朋友一起看看吧
2016-12-12
利用AJAX实现WordPress中的文章列表及评论的分页功能
在文中列表页方面利用AJAX制作滚动到底触发翻页的效果比较常见,而在评论加载时AJAX显示正在加载也很常用,下面就来看一下如何利用AJAX实现WordPress中的文章列表及评论的分页功能
2016-05-05
javascript实现智能手环时间显示
这篇文章主要为大家详细介绍了javascript实现智能手环时间显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
js用类封装pop弹窗组件
这篇文章主要为大家详细介绍了js用类封装pop弹窗组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
小试JavaScript多线程
这两天一直在弄ajax，用多了才发现了ajax 的cache问题，请求了好多次，得到了确是相同的结果，经常我想在请求的同时去做一些其它的事情，我在想javascript里有没有办法用多线程，经过在网上查找找到了结果。
2008-11-11
JavaScript 详解预编译原理
这篇文章主要介绍了JavaScript 详解预编译原理的相关资料,需要的朋友可以参考下
2017-01-01