推荐阅读
国外银行页面就是因为这样的错误，导致用户大量流失不敢用这个银行的网上银行等导致损失惨重。所以一个想要在用户体验与公司实力上都是不容出现的错误，就是不影响使用也不能让用户反感，脚本之家一直致力于为大家>>>详细阅读
本文标题：!DOCTYPE声明对JavaScript的影响分析
地址：http://www.17bianji.com/kaifa2/JS/26639.html
1/2 1
!DOCTYPE声明对JavaScript的影响分析
作者： 来源：www.28hudong.com 2013-03-30 01:41:23 阅读次 我要评论
要建立符合标准的网页，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来取得元素的精确值。
关键词： 探索发现
乐购科技部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与乐购科技进行文章共享合作。
网友点评
精彩导读
科技快报
品牌展示© 2013-2016 IT技术 京ICP备11016124号-4
京公网安备 11011202000261号