脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → !DOCTYPE JavaScript

!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来取得元素的精确值。

您可能感兴趣的文章:

相关文章

  • 基于javascript的异步编程实例详解

    基于javascript的异步编程实例详解

    这篇文章主要介绍了基于javascript的异步编程,结合实例形式分析了javascript异步编程的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • JS实现移动端上下滑动一次一屏

    JS实现移动端上下滑动一次一屏

    这篇文章主要为大家详细介绍了JS实现移动端上下滑动一次一屏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • js实现滑动进度条效果

    js实现滑动进度条效果

    这篇文章主要为大家详细介绍了js实现滑动进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • postMessage及webSocket跨域方案详解

    postMessage及webSocket跨域方案详解

    这篇文章主要为大家介绍了postMessage及webSocket跨域方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • javascript 关键字高亮显示实现代码

    javascript 关键字高亮显示实现代码

    屏蔽HTML标签，支持多关键字（以空格间隔），关键字内可含有特殊字符
    2010-09-09
  • js与jquery获取父元素,删除子元素的两种不同方法

    js与jquery获取父元素,删除子元素的两种不同方法

    本篇文章主要是对js与jquery获取父元素,删除子元素的两种不同方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • 基于ajax和jsonp的原生封装(实例)

    基于ajax和jsonp的原生封装(实例)

    下面小编就为大家带来一篇基于ajax和jsonp的原生封装(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript中变量提升 Hoisting

    JavaScript中变量提升 Hoisting

    因为这个问题很是经典，而且容易出错，所以在介绍一次。哈哈。莫怪哦。
    2012-07-07
  • javascript温习的一些笔记 基础常用知识小结

    javascript温习的一些笔记 基础常用知识小结

    在电脑上找到多年前的javascript的一些小笔记，因为要将笔记本上面的文件整理一下， 不用的删除掉， 所以将此篇笔记再发布一下，存档到自己的博客吧， 电脑上的文件就删除了
    2011-06-06
  • js 转json格式的字符串为对象或数组(前后台)的方法

    js 转json格式的字符串为对象或数组(前后台)的方法

    下面小编就为大家带来一篇js 转json格式的字符串为对象或数组(前后台)的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论