!DOCTYPE聲明對(duì)JavaScript的影響
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
DOCTYPE是document type(文檔類型)的簡寫，在web設(shè)計(jì)中用來說明你用的XHTML或者HTML是什么版本。 要建立符合標(biāo)準(zhǔn)的網(wǎng)頁，DOCTYPE聲明是必不可少的關(guān)鍵組成部分；除非你的XHTML確定了一個(gè)正確的DOCTYPE，否則你的標(biāo)識(shí)和CSS都不會(huì)生效；當(dāng)然對(duì)JS的取值也會(huì)有影響。 DOCTYPE聲明如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> DOCTYPE聲明包括：過渡型（Transitional），嚴(yán)格型（Strict）和框架型（Frameset）。接下來就看一下這三種類型對(duì)不同瀏覽器在獲取元素相關(guān)信息時(shí)的影響（包括不定義DOCTYPE和只將DOCTYPE定義為<!docType>形式），我測(cè)試的瀏覽器分別為：IE6.0、IE7.0、IE8.0（變態(tài)模式）、FF、Opera、Chrome和Safari。由于IE5.5已經(jīng)幾乎被淘汰，所以不在測(cè)試范圍之內(nèi)。 以下就是測(cè)試結(jié)果（滾動(dòng)條只是元素本身的滾動(dòng)條并不是窗口的）： 一、過渡型（Transitional） 1、測(cè)試IE6.0、IE7.0與IE8.0（非變態(tài)模式Quirks）的寬度和高度（width，height） offsetWidth，offsetHeight clientWidth，clientHeight currentStyle[‘width’]，currentStyle[‘width’] 有無滾動(dòng)條均為： offsetWidth= paddingLeft+paddingRight+borderLeft+borderRight offsetHeight= paddingTop+paddingBottom+borderTop+boderBottom 1、無滾動(dòng)條 clientWidth=CSS中定義的寬度+paddingLeft+paddingRight clientHeight=CSS中定義的高度+paddingTop+paddingBottom （均不包括邊框?qū)挾龋?/DIV> 2、有滾動(dòng)條 clientWidth=CSS中定義的寬度-滾動(dòng)條寬度（17固定值）-邊框?qū)挾龋?/DIV> clientHeight=CSS中定義的高度-滾動(dòng)條寬度（17固定值）-邊框?qū)挾?BR> 實(shí)際真實(shí)寬度，不包括padding與邊框值 （除IE和Opera以外無此屬性） offsetLeft，offsetTop clientLeft，clientTop currentSytle[‘left’]，currentStyle[‘top’] 有無滾動(dòng)條均為： offsetLeft=對(duì)象的offsetLeft-邊框 offsetTop=實(shí)際值 有無滾動(dòng)條均為：邊框的寬度 除IE和Opera以外無此屬性 2、測(cè)試IE8.0變態(tài)模式(Quirks)的寬度與高度（width，height） offsetWidth，offsetHeight clientWidth，clientHeight currentStyle[‘width’]，currentStyle[‘height] 1、（無滾動(dòng)條）寬度（高度）=當(dāng)前對(duì)象的實(shí)際數(shù)值 2、（有滾動(dòng)條）寬度（高度）=CSS中定義的數(shù)值 1、（無滾動(dòng)條）寬度（高度）=當(dāng)前對(duì)象的實(shí)際數(shù)值 2、（有滾動(dòng)條）寬度（高度）=當(dāng)前對(duì)象在CSS中定義的數(shù)值-滾動(dòng)條（17） 有無滾動(dòng)條均為： 寬度和高度均為CSS中定義的數(shù)值 offsetLeft，offsetTop clientLeft，clientTop currentSytle[‘left’]，currentStyle[‘top’] 有無滾動(dòng)條均為： offsetLeft（offsetTop）=實(shí)際值 有無滾動(dòng)條均為：邊框的寬度 除IE和Opera以外無此屬性 3、FF、Opera、Safari和Chrom中所取得的數(shù)值與第一種情況一樣。 二、嚴(yán)格型（Strict） 1、測(cè)試IE6.0、IE7.0與IE8.0（非變態(tài)模式Quirks）的寬度和高度（width，height） offsetWidth，offsetHeight clientWidth，clientHeight currentStyle[‘width’]，currentStyle[‘width’] 有無滾動(dòng)條均為： offsetWidth= paddingLeft+paddingRight+borderLeft+borderRight offsetHeight= paddingTop+paddingBottom+borderTop+boderBottom 1、無滾動(dòng)條 clientWidth=CSS中定義的寬度+paddingLeft+paddingRight clientHeight=CSS中定義的高度+paddingTop+paddingBottom
均不包括邊框?qū)挾?/DIV> 2、有滾動(dòng)條
clientWidth=CSS中定義的寬度-滾動(dòng)條寬度（17固定值）-邊框?qū)挾龋?/DIV> clientHeight=CSS中定義的高度-滾動(dòng)條寬度（17固定值）-邊框?qū)挾?BR> 實(shí)際真實(shí)寬度，不包括padding與邊框值 （除IE和Opera以外無此屬性） offsetLeft，offsetTop clientLeft，clientTop currentSytle[‘left’]，currentStyle[‘top’] 有無滾動(dòng)條均為： offsetLeft=對(duì)象的offsetLeft-邊框 offsetTop=實(shí)際值 有無滾動(dòng)條均為：邊框的寬度 除IE和Opera以外無此屬性 2、測(cè)試IE8.0變態(tài)模式(Quirks)的寬度與高度（width，height） offsetWidth，offsetHeight clientWidth，clientHeight currentStyle[‘width’]，currentStyle[‘height] 1、（無滾動(dòng)條）寬度（高度）=當(dāng)前對(duì)象的實(shí)際數(shù)值 2、（有滾動(dòng)條）寬度（高度）=CSS中定義的數(shù)值 1、（無滾動(dòng)條）寬度（高度）=當(dāng)前對(duì)象的實(shí)際數(shù)值 2、（有滾動(dòng)條）寬度（高度）=當(dāng)前對(duì)象在CSS中定義的數(shù)值-滾動(dòng)條（17）-邊框?qū)挾?BR> 有無滾動(dòng)條均為： 寬度和高度均為CSS中定義的數(shù)值 （除IE和Opera以外無此屬性） offsetLeft，offsetTop clientLeft，clientTop currentSytle[‘left’]，currentStyle[‘top’] 有無滾動(dòng)條均為： offsetLeft（offsetTop）=實(shí)際值 有無滾動(dòng)條均為：邊框的寬度 除IE和Opera以外無此屬性 3、FF、Opera、Safari和Chrom中所取得的數(shù)值與第一種情況一樣。 三、取消DOCTYPE聲明 1、IE6.0、IE7.0在沒有DOCTYPE聲明時(shí)與IE8.0中的變態(tài)模式（Quirks）中嚴(yán)格型結(jié)果相同。 2、FF、Safari、Chrome和IE8.0標(biāo)準(zhǔn)模式是與過渡型結(jié)果相同。 3、Opera瀏覽器中，在元素沒有滾動(dòng)條時(shí)offsetHeight與clientHeight的取值是在其當(dāng)前現(xiàn)實(shí)的大小。 四、將DOCTYPE聲明改寫為<!docType> 1、IE6.0、IE7.0在沒有DOCTYPE聲明時(shí)與IE8.0中的變態(tài)模式（Quirks）中嚴(yán)格型結(jié)果相同。 2、FF、Safari、Chrome和IE8.0標(biāo)準(zhǔn)模式是與過渡型結(jié)果相同。 3、Opera瀏覽器中，在元素沒有滾動(dòng)條時(shí)offsetHeight與clientHeight的取值是在其當(dāng)前現(xiàn)實(shí)的大小。 在Opera中也擁有與IE一樣的屬性“currentStyle”，所以在Opera中也可以使用currentStyle來取得元素的精確值。
該文章在 2011/2/15 22:44:14 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
