DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁制作技巧:獲取頁面可視區域的高度
網頁制作技巧:獲取頁面可視區域的高度
編輯:CSS詳解     
文章簡介:獲取頁面可視區域高度,獲取頁面高度,獲取滾動條滾動上去的頁面高度.function getWH(){ var wh = {}; "Height Width".replace(/[^\s]+/g,function(a){ var b = a.toLowerCase(); wh[b]=window["inner".concat(a)] document.compatMode ==="CSS1Compat" && document.documentElement["client".concat(a)] document.body["clIEnt".concat(a)]; }); return wh; } 了解兩個名詞:BackCompat 標准兼容模式關閉(怪異模式) CSS1Compat 標准兼容模式開啟這個方法為獲取頁面可視區域的高度,普通情況下,window.innerHeight 即可獲取,如果是正常模式,並且有clientHeight的情況下, document.documentElement.clIEntHeight 獲取的就是可視區域高度。在怪異模式下,是使用document.body獲取。
function getBodyWH(){ var wh = {}; "Height Width".replace(/[^\s]+/g,function(a){ var b = a.toLowerCase(); wh[b]=document.compatMode ==="CSS1Compat" && document.documentElement["scroll".concat(a)] document.body["scroll".concat(a)]; }); return wh; } 這個為獲取頁面的高度,用於iframe的自適應時候獲取。
var ss = {}; ss.scrollTopFn = function(arg){ var a = navigator.userAgent.toLowerCase().indexof("webkit");//判斷webkit內核 var scrollTop; if(a>-1document.compatMode =="BackCompat"){ this.scrollTopFn =function(arg){ if(typeof arg == 'number'){ document.body.scrollTop = arg; }else{ return document.body.scrollTop; } } }else{ this.scrollTopFn =function(arg){ if(typeof arg == 'number'){ document.documentElement.scrollTop = arg; }else{ return document.documentElement.scrollTop; } } } return this.scrollTopFn.apply(this,arguments); } 這個返回scrollTop 即滾動上去的頁面的高度,因為在webkit內核下渲染的都是使用body,所以和上面兩個判斷是不一樣的。在怪異模式下同樣是用body。其他情況都是用documentElment。這些玩意蠻煩的,今天弄了一天才總結出來了這麼些,網上查找也沒找到特別標准的說法,就一個個自己試了下,寫了幾個函數以供以後使用。有人如果有更好的判斷方法的話,還望告知,謝謝!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved