原生js和jQ獲取視窗寬高及捲軸的方法和函式一。原生js獲取1.實際寬高（不包括工具欄，捲軸的視口高度，ie6.7.8不支援）window.innerHeightwindow.innerWidth2.螢幕寬高screen.heightscreen.width3..螢幕寬高（除windows工作列之外的高度）螢幕可用工作區screen.avaiHeightscreen.availWidth4.網頁可見區域寬高document.body.clientWidthdocument.body.clientHeight5.網頁可見區域寬高（包括邊線的寬高）document.body.offsetWidthdocument.body.offsetHeight6.網頁正文全文寬高document.body.scrollWidthocument.body.scrollHeight7.網頁被捲去的左高document.body.scrollTopdocument.body.scrollLeft8.在我本地測試當中：【轉】在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可獲得，很簡單，很方便。而在公司專案當中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox則使用document.documentElement.clientWidthdocument.documentElement.clientHeight原來是W3C的標準在作怪啊<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">如果在頁面中新增這行標記的話在IE中：document.body.clientWidth ==> BODY物件寬度document.body.clientHeight ==> BODY物件高度document.documentElement.clientWidth ==> 可見區域寬度document.documentElement.clientHeight ==> 可見區域高度在FireFox中：document.body.clientWidth ==> BODY物件寬度document.body.clientHeight ==> BODY物件高度document.documentElement.clientWidth ==> 可見區域寬度document.documentElement.clientHeight ==> 可見區域高度?在Opera中：document.body.clientWidth ==> 可見區域寬度document.body.clientHeight ==> 可見區域高度document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面物件高度（即BODY物件高度加上Margin高）而如果沒有定義W3C的標準，則IE為：document.documentElement.clientWidth ==> 0document.documentElement.clientHeight ==> 0FireFox為：document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面物件高度（即BODY物件高度加上Margin高）Opera為：document.documentElement.clientWidth ==> 頁面物件寬度（即BODY物件寬度加上Margin寬）document.documentElement.clientHeight ==> 頁面物件高度（即BODY物件高度加上Margin高）真是一件麻煩事情，其實就開發來看，寧可少一些物件和方法，不使用最新的標準要方便許多啊。有時候需要取頁面的底部, 就會用到document.body.clientHeight , 在HTML 標準中(這一句就能取到整個頁面的高度, 不論body 的實際內容到底有多高, 例如, 1074*768 的解析度, 頁面最大化時, 這個高度約為720 , 即使頁面上只有一句”hello world” , 也仍然取到720.可是在XHTML中, 如果body 體中只有一行, 則document.body.clientHeight 只能取到那一行的高度, 約20px, 這時如何還想取到整個頁面的高度, 就要用document.documentElement.clientHeight 來獲取了.原因是: 在HTML 中, body 是整個DOM 的根, 而在XHTML 中, document 才是根, body 不再是根, 所以取body 的屬性時, 不能再取到整個頁面的值.區別新舊標準的行是:<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” ><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““>前者指明該頁面使用舊標準, 後者指明該頁面使用新標準.總結:XHTML中用 document.documentElement.clientHeight 代替9.獲取滾動距離的函式，可直接呼叫___getPageScroll()函式來獲取陣列，或自己除錯成相應的物件。function ___getPageScroll() {  var xScroll, yScroll;  if (self.pageYOffset) {    yScroll = self.pageYOffset;    xScroll = self.pageXOffset;  } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict    yScroll = document.documentElement.scrollTop;    xScroll = document.documentElement.scrollLeft;  } else if (document.body) {// all other Explorers    yScroll = document.body.scrollTop;    xScroll = document.body.scrollLeft;   }  arrayPageScroll = new Array(xScroll,yScroll);  return arrayPageScroll;};二。jQ獲取1.獲取第一個div的寬高$("div").width()$("div").height()2.獲取padding+content的寬高$("div").innerWidth()$("div").innerHeight()3.獲取content+padding+border+margin的寬高$("div").outerHeight()$("div").outerWidth()4.獲取當前元素的相對視窗偏移量（position:relative下的子元素）$("p").offset().top$("p").offset().left5.獲取捲軸scrollLeft()scrollTop()
原生js和jQ獲取視窗寬高及捲軸的方法和函式

相關文章
