首頁 > 開發者 > JavaScript

!DOCTYPE聲明對JavaScript的影響分析

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

要建立符合標準的網頁，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來取得元素的精確值。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
xsl doctype doctype dtd w3schools doctype doctype php doctype html php doctype in php doctype html utf 8
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More