瓜籽儿的Blog

专注于JavaScript技术！努力用最简单的办法去解决最复杂的问题！
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

!DOCTYPE声明对JavaScript的影响

Posted on 2010-04-11 22:01  瓜籽  阅读(744)  评论(2)  编辑  收藏  举报

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