!DOCTYPE声明对JavaScript的影响分析_javascript技巧
DOCTYPE声明如下:
DOCTYPE声明包括:过渡型(Transitional),严格型(Strict)和框架型(Frameset)。接下来就看一下这三种类型对不同浏览器在获取元素相关信息时的影响(包括不定义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'] |
有无滚动条均为: |
1、无滚动条 |
实际真实宽度,不包括padding与边框值 |
offsetLeft,offsetTop | clientLeft,clientTop | currentSytle[‘left'],currentStyle[‘top'] |
有无滚动条均为: |
有无滚动条均为:边框的宽度 |
除IE和Opera以外无此属性 |
2、测试IE8.0变态模式(Quirks)的宽度与高度(width,height)
offsetWidth,offsetHeight | clientWidth,clientHeight | currentStyle[‘width'],currentStyle[‘height] |
1、(无滚动条)宽度(高度)=当前对象的实际数值 |
1、(无滚动条)宽度(高度)=当前对象的实际数值 |
有无滚动条均为: |
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'] |
有无滚动条均为: |
1、无滚动条 |
实际真实宽度,不包括padding与边框值 |
offsetLeft,offsetTop | clientLeft,clientTop | currentSytle[‘left'],currentStyle[‘top'] |
有无滚动条均为: |
有无滚动条均为:边框的宽度 |
除IE和Opera以外无此属性 |
2、测试IE8.0变态模式(Quirks)的宽度与高度(width,height)
offsetWidth,offsetHeight | clientWidth,clientHeight | currentStyle[‘width'],currentStyle[‘height] |
1、(无滚动条)宽度(高度)=当前对象的实际数值 |
1、(无滚动条)宽度(高度)=当前对象的实际数值 |
有无滚动条均为: |
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声明改写为
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、CSS以及img对DOMContentLoaded事件的影响_javascript技巧
-
input 输入框内的输入事件详细分析_javascript技巧
-
JS函数this的用法实例分析_javascript技巧
-
IE iframe的onload方法分析小结_javascript技巧
-
百度空间的popup效果分析_javascript技巧
-
javascript中的数字与字符串相加实例分析_javascript技巧
-
关于js new Date() 出现NaN 的分析_javascript技巧
-
input 输入框内的输入事件详细分析_javascript技巧
-
js中hash和ico的关联分析_javascript技巧
-
Javascript 闭包引起的IE内存泄露分析_javascript技巧