javascript針對DOM的應用分析（五）

2024-05-06 14:22:05

字體：大中小

來源：轉載

供稿：網友

其實這個應該不列入JS教程的范疇。應為FF，IE6以上瀏覽器都支持fixed這個固定屬性。唯獨IE6不支持。所以我為了可惡的IE6。我這里就出一篇教程吧。而且這種效果也可以鍛煉同學們的計算能力。以后很多效果都需要你的計算能力。哈哈
固定居中。或者固定在任何地方思想幾乎是一樣的。只你要算法清楚了。效果寫起來就輕而易舉了。先貼代碼

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
這兩句是判斷瀏覽器。這是Aajx里的方法。也很好理解。我在這里就不多說了。大家有興趣的可以去網上找找了解一下判斷各種瀏覽器。

var t= (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
這兩句是重點。我要仔細說下：
document.documentElement.clientHeight這個是獲取當前瀏覽器窗口的高度。
document.getElementById("gd").offsetHeight這是獲取我們dom元素的實際高度。
document.documentElement.scrollTop這是獲取滾動條滾動的高度。

document.documentElement.clientHeight/2整個瀏覽器高度的一半減去document.getElementById("gd").offsetHeight/2我們dom元素高度的一半。就是我們這個DOM元素要居中所需要距離當前瀏覽器頂部的top距離。但是這只是個死的高度。因為瀏覽器的內容不可能正好就是小于等于瀏覽器當前窗口的高度。內容特別高的時候會出現滾動條。好在我們有document.documentElement.scrollTop也就是我們滾動條滾動的高度。把他加上就是即時dom元素需要居中時候距離當前瀏覽器頂部的top距離，當然下面那句的算法和這個是一樣的，我就不多說了，也讓大家自己理解一下，這樣印象會深刻一點。

不知道我這樣說大家理解沒有。這個應該用個圖文說明的。不過我覺得我說的應該挺清楚了。大家如果還有點模糊。在紙上畫畫也就能明白了。

上一篇：深入理解JavaScript系列（16）閉包（Closures）

下一篇：深入理解JavaScript系列（15）函數（Functions）