javascript知識(shí)點(diǎn)收藏
更新時(shí)間:2007年02月22日 00:00:00 作者:
1.四種瀏覽器對(duì) document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家對(duì) clientHeight 都沒(méi)有什么異議,都認(rèn)為是內(nèi)容可視區(qū)域的高度,也就是說(shuō)頁(yè)面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度,一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域,與頁(yè)面內(nèi)容無(wú)關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度,可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度,不過(guò)最小值是 clientHeight。
簡(jiǎn)單地說(shuō)
clientHeight 就是透過(guò)瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁(yè)內(nèi)容高度,只不過(guò)當(dāng)網(wǎng)頁(yè)內(nèi)容高度小于等于 clientHeight 時(shí),scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁(yè)內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
但是
FF 在不同的 DOCTYPE 中對(duì) clientHeight 的解釋不同, xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問(wèn)題。
2.JS取clientHeight與scrollTop
先來(lái)段數(shù)據(jù),下表的值為document.body.clientHeight / document.documentElement.clientHeight
IE FF
Html 608/0 630/11096
Xhtml 10942/591 11076/630
在html/xhtml與ie/ff這4種排列組合下,取得的clientHeight幾乎沒(méi)有一樣的,可見(jiàn)寫(xiě)一段兼容3種瀏覽器兩種頁(yè)面標(biāo)準(zhǔn)的js腳本有多頭疼。
暫時(shí)總結(jié)的判斷方法如下:
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判斷當(dāng)前頁(yè)面的Doctype是否為Xhtml
var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //最終結(jié)果比較一致
安全的取到scrollTop:
document.body.scrollTop + document.documentElement.scrollTop
判斷瀏覽器的類(lèi)型,這種寫(xiě)法挺喜歡的:
var ua = navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;
3.js取到flash對(duì)象方法匯總
IE, FF, Maxthon用document.getElementById(id)
Opera用 document.embeds(id)
var isOpera=(window.opera&&navigator.userAgent.match(/opera/gi))?true:false;
if(isOpera){
var oswf = document.embeds('ad_flipper_swf');
}else{
var oswf = document.getElementById('ad_flipper_swf');
}
4.js執(zhí)行順序
1.同級(jí)的不同的代碼塊,代碼塊間的執(zhí)行順序?yàn)閺纳系较拢?BR>2.在代碼中嵌入代碼的情況下,先執(zhí)行上層代碼塊,再執(zhí)行子代碼塊;代碼中嵌入代碼
是指一個(gè)文件引入另一個(gè)文件,而不是指所有的通過(guò)document.write形式打出的代碼。
這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家對(duì) clientHeight 都沒(méi)有什么異議,都認(rèn)為是內(nèi)容可視區(qū)域的高度,也就是說(shuō)頁(yè)面瀏覽器中可以看到內(nèi)容的這個(gè)區(qū)域的高度,一般是最后一個(gè)工具條以下到狀態(tài)欄以上的這個(gè)區(qū)域,與頁(yè)面內(nèi)容無(wú)關(guān)。
offsetHeight
IE、Opera 認(rèn)為 offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
NS、FF 認(rèn)為 offsetHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度,可以小于 clientHeight。
scrollHeight
IE、Opera 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度,可以小于 clientHeight。
NS、FF 認(rèn)為 scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度,不過(guò)最小值是 clientHeight。
簡(jiǎn)單地說(shuō)
clientHeight 就是透過(guò)瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。
NS、FF 認(rèn)為 offsetHeight 和 scrollHeight 都是網(wǎng)頁(yè)內(nèi)容高度,只不過(guò)當(dāng)網(wǎng)頁(yè)內(nèi)容高度小于等于 clientHeight 時(shí),scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 認(rèn)為 offsetHeight 是可視區(qū)域 clientHeight 滾動(dòng)條加邊框。scrollHeight 則是網(wǎng)頁(yè)內(nèi)容實(shí)際高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。
但是
FF 在不同的 DOCTYPE 中對(duì) clientHeight 的解釋不同, xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問(wèn)題。
2.JS取clientHeight與scrollTop
先來(lái)段數(shù)據(jù),下表的值為document.body.clientHeight / document.documentElement.clientHeight
IE FF
Html 608/0 630/11096
Xhtml 10942/591 11076/630
在html/xhtml與ie/ff這4種排列組合下,取得的clientHeight幾乎沒(méi)有一樣的,可見(jiàn)寫(xiě)一段兼容3種瀏覽器兩種頁(yè)面標(biāo)準(zhǔn)的js腳本有多頭疼。
暫時(shí)總結(jié)的判斷方法如下:
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判斷當(dāng)前頁(yè)面的Doctype是否為Xhtml
var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //最終結(jié)果比較一致
安全的取到scrollTop:
document.body.scrollTop + document.documentElement.scrollTop
判斷瀏覽器的類(lèi)型,這種寫(xiě)法挺喜歡的:
var ua = navigator.userAgent.toLowerCase ();
var os = new Object();
os.isFirefox = ua.indexOf ("gecko") != -1;
os.isOpera = ua.indexOf ("opera") != -1;
os.isIE = !os.isOpera && ua.indexOf ("msie") != -1;
3.js取到flash對(duì)象方法匯總
IE, FF, Maxthon用document.getElementById(id)
Opera用 document.embeds(id)
var isOpera=(window.opera&&navigator.userAgent.match(/opera/gi))?true:false;
if(isOpera){
var oswf = document.embeds('ad_flipper_swf');
}else{
var oswf = document.getElementById('ad_flipper_swf');
}
4.js執(zhí)行順序
1.同級(jí)的不同的代碼塊,代碼塊間的執(zhí)行順序?yàn)閺纳系较拢?BR>2.在代碼中嵌入代碼的情況下,先執(zhí)行上層代碼塊,再執(zhí)行子代碼塊;代碼中嵌入代碼
是指一個(gè)文件引入另一個(gè)文件,而不是指所有的通過(guò)document.write形式打出的代碼。
您可能感興趣的文章:
- 關(guān)于vue.js彈窗組件的知識(shí)點(diǎn)總結(jié)
- javaScript知識(shí)點(diǎn)總結(jié)(必看篇)
- JavaScript入門(mén)系列之知識(shí)點(diǎn)總結(jié)
- JavaScript知識(shí)點(diǎn)總結(jié)之如何提高性能
- JS運(yùn)動(dòng)相關(guān)知識(shí)點(diǎn)小結(jié)(附彈性運(yùn)動(dòng)示例)
- js+jquery常用知識(shí)點(diǎn)匯總
- JavaScript 語(yǔ)言基礎(chǔ)知識(shí)點(diǎn)總結(jié)(思維導(dǎo)圖)
- JS重要知識(shí)點(diǎn)小結(jié)
- javascript Excel操作知識(shí)點(diǎn)
- JS常用知識(shí)點(diǎn)整理
相關(guān)文章
JavaScript arguments 多參傳值函數(shù)
在一個(gè)函數(shù)體內(nèi),標(biāo)識(shí)符arguments引用了arguments對(duì)象的一個(gè)特殊屬性。可以按照數(shù)目(而不是名字)獲取傳遞給函數(shù)的參數(shù)值。2010-10-10用Object.prototype.toString.call(obj)檢測(cè)對(duì)象類(lèi)型原因分析
在本篇文章里我們給大家剖析了用Object.prototype.toString.call(obj)檢測(cè)對(duì)象類(lèi)型的原因,需要的朋友們可以學(xué)習(xí)下。2018-10-10在Javascript中 聲明時(shí)用"var"與不用"var"的區(qū)別
Javascript聲明變量的時(shí)候,雖然用var關(guān)鍵字聲明和不用關(guān)鍵字聲明,很多時(shí)候運(yùn)行并沒(méi)有問(wèn)題,但是這兩種方式還是有區(qū)別的2013-04-04淺談js基本數(shù)據(jù)類(lèi)型和typeof
下面小編就為大家?guī)?lái)一篇淺談js基本數(shù)據(jù)類(lèi)型和typeof。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08簡(jiǎn)單的ajax連接庫(kù)分享(不用jquery的ajax)
自己寫(xiě)了一個(gè)簡(jiǎn)單的ajax連接庫(kù),沒(méi)有使用jquery的ajax,這個(gè)代碼要比jquery輕量,大家參考使用吧,2014-01-01