&

!DOCTYPE聲明對JavaScript的影響

admin

2011年2月15日 22:44 本文熱度 3192

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固定值）-邊框寬度，

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

該文章在 2011/2/15 22:44:14 編輯過