!DOCTYPE聲明對(duì)JavaScript的影響分析
要建立符合標(biāo)準(zhǔn)的網(wǎng)頁(yè),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聲明包括:過(guò)渡型(Transitional),嚴(yán)格型(Strict)和框架型(Frameset)。接下來(lái)就看一下這三種類(lèi)型對(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)條并不是窗口的):
一、過(guò)渡型(Transitional)
1、測(cè)試IE6.0、IE7.0與IE8.0(非變態(tài)模式Quirks)的寬度和高度(width,height)
offsetWidth,offsetHeight | clientWidth,clientHeight | currentStyle[‘width'],currentStyle[‘width'] |
有無(wú)滾動(dòng)條均為: |
1、無(wú)滾動(dòng)條 |
實(shí)際真實(shí)寬度,不包括padding與邊框值 |
offsetLeft,offsetTop | clientLeft,clientTop | currentSytle[‘left'],currentStyle[‘top'] |
有無(wú)滾動(dòng)條均為: |
有無(wú)滾動(dòng)條均為:邊框的寬度 |
除IE和Opera以外無(wú)此屬性 |
2、測(cè)試IE8.0變態(tài)模式(Quirks)的寬度與高度(width,height)
offsetWidth,offsetHeight | clientWidth,clientHeight | currentStyle[‘width'],currentStyle[‘height] |
1、(無(wú)滾動(dòng)條)寬度(高度)=當(dāng)前對(duì)象的實(shí)際數(shù)值 |
1、(無(wú)滾動(dòng)條)寬度(高度)=當(dāng)前對(duì)象的實(shí)際數(shù)值 |
有無(wú)滾動(dòng)條均為: |
offsetLeft,offsetTop | clientLeft,clientTop | currentSytle[‘left'],currentStyle[‘top'] |
有無(wú)滾動(dòng)條均為: offsetLeft(offsetTop)=實(shí)際值 |
有無(wú)滾動(dòng)條均為:邊框的寬度 |
除IE和Opera以外無(wú)此屬性 |
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'] |
有無(wú)滾動(dòng)條均為: |
1、無(wú)滾動(dòng)條 |
實(shí)際真實(shí)寬度,不包括padding與邊框值 |
offsetLeft,offsetTop | clientLeft,clientTop | currentSytle[‘left'],currentStyle[‘top'] |
有無(wú)滾動(dòng)條均為: |
有無(wú)滾動(dòng)條均為:邊框的寬度 |
除IE和Opera以外無(wú)此屬性 |
2、測(cè)試IE8.0變態(tài)模式(Quirks)的寬度與高度(width,height)
offsetWidth,offsetHeight | clientWidth,clientHeight | currentStyle[‘width'],currentStyle[‘height] |
1、(無(wú)滾動(dòng)條)寬度(高度)=當(dāng)前對(duì)象的實(shí)際數(shù)值 |
1、(無(wú)滾動(dòng)條)寬度(高度)=當(dāng)前對(duì)象的實(shí)際數(shù)值 |
有無(wú)滾動(dòng)條均為: |
offsetLeft,offsetTop | clientLeft,clientTop | currentSytle[‘left'],currentStyle[‘top'] |
有無(wú)滾動(dòng)條均為: offsetLeft(offsetTop)=實(shí)際值 |
有無(wú)滾動(dòng)條均為:邊框的寬度 |
除IE和Opera以外無(wú)此屬性 |
3、FF、Opera、Safari和Chrom中所取得的數(shù)值與第一種情況一樣。
三、取消DOCTYPE聲明
1、IE6.0、IE7.0在沒(méi)有DOCTYPE聲明時(shí)與IE8.0中的變態(tài)模式(Quirks)中嚴(yán)格型結(jié)果相同。
2、FF、Safari、Chrome和IE8.0標(biāo)準(zhǔn)模式是與過(guò)渡型結(jié)果相同。
3、Opera瀏覽器中,在元素沒(méi)有滾動(dòng)條時(shí)offsetHeight與clientHeight的取值是在其當(dāng)前現(xiàn)實(shí)的大小。
四、將DOCTYPE聲明改寫(xiě)為<!docType>
1、IE6.0、IE7.0在沒(méi)有DOCTYPE聲明時(shí)與IE8.0中的變態(tài)模式(Quirks)中嚴(yán)格型結(jié)果相同。
2、FF、Safari、Chrome和IE8.0標(biāo)準(zhǔn)模式是與過(guò)渡型結(jié)果相同。
3、Opera瀏覽器中,在元素沒(méi)有滾動(dòng)條時(shí)offsetHeight與clientHeight的取值是在其當(dāng)前現(xiàn)實(shí)的大小。
在Opera中也擁有與IE一樣的屬性“currentStyle”,所以在Opera中也可以使用currentStyle來(lái)取得元素的精確值。
相關(guān)文章
js中class的點(diǎn)擊事件沒(méi)有效果的解決方法
下面小編就為大家?guī)?lái)一篇js中class的點(diǎn)擊事件沒(méi)有效果的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Javascript+CSS實(shí)現(xiàn)影像卷簾效果思路及代碼
Arcmap里面的一個(gè)卷簾效果肯定記憶很深刻,我也對(duì)這種比較炫的卷簾效果做了一下研究,現(xiàn)在給大家匯報(bào)下結(jié)果2014-10-10javascript的23種設(shè)計(jì)模式示例總結(jié)大全
這篇文章主要為大家介紹了javascript的23種設(shè)計(jì)模式的總結(jié)大全,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁(yè)功能
在文中列表頁(yè)方面利用AJAX制作滾動(dòng)到底觸發(fā)翻頁(yè)的效果比較常見(jiàn),而在評(píng)論加載時(shí)AJAX顯示正在加載也很常用,下面就來(lái)看一下如何利用AJAX實(shí)現(xiàn)WordPress中的文章列表及評(píng)論的分頁(yè)功能2016-05-05javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)智能手環(huán)時(shí)間顯示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09