javascript知識點收藏

來源:互聯網
上載者:User

1.四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。

這四種瀏覽器分別為IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

clientHeight
大家對 clientHeight 都沒有什麼異議,都認為是內容可視地區的高度,也就是說頁面瀏覽器中可以看到內容的這個地區的高度,一般是最後一個工具條以下到狀態列以上的這個地區,與頁面內容無關。

offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 捲軸 + 邊框。
NS、FF 認為 offsetHeight 是網頁內容實際高度,可以小於 clientHeight。

scrollHeight
IE、Opera 認為 scrollHeight 是網頁內容實際高度,可以小於 clientHeight。
NS、FF 認為 scrollHeight 是網頁內容高度,不過最小值是 clientHeight。

簡單地說
clientHeight 就是透過瀏覽器看內容的這個地區高度。
NS、FF 認為 offsetHeight 和 scrollHeight 都是網頁內容高度,只不過當網頁內容高度小於等於 clientHeight 時,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小於 clientHeight。
IE、Opera 認為 offsetHeight 是可視地區 clientHeight 捲軸加邊框。scrollHeight 則是網頁內容實際高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解釋與上面相同,只是把高度換成寬度即可。

但是
FF 在不同的 DOCTYPE 中對 clientHeight 的解釋不同, xhtml 1 trasitional 中則不是如上解釋的。其它瀏覽器則不存在此問題。

2.JS取clientHeight與scrollTop
先來段資料,下表的值為document.body.clientHeight / document.documentElement.clientHeight

IE FF
Html 608/0 630/11096
Xhtml 10942/591 11076/630

在html/xhtml與ie/ff這4種排列組合下,取得的clientHeight幾乎沒有一樣的,可見寫一段相容3種瀏覽器兩種頁面標準的js指令碼有多頭疼。

暫時總結的判斷方法如下:
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判斷當前頁面的Doctype是否為Xhtml
var body = isXhtml?document.documentElement:document.body;
alert(body.clientHeight); //最終結果比較一致

安全的取到scrollTop:
document.body.scrollTop + document.documentElement.scrollTop

判斷瀏覽器的類型,這種寫法挺喜歡的:
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對象方法匯總

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執行順序
1.同級的不同的代碼塊,代碼塊間的執行順序為從上到下;
2.在代碼中內嵌程式碼的情況下,先執行上層代碼塊,再執行子代碼塊;代碼中內嵌程式碼
是指一個檔案引入另一個檔案,而不是指所有的通過document.write形式打出的代碼。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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