!DOCTYPE声明对JavaScript的影响分析

2020-02-28 04:07:20

字体：大中小

来源：转载

供稿：网友

要建立符合标准的网页，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以外无此属性