摘要：包括和屬性是可以賦值的，并且會立即自動滾動網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對位置。另外，方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。網(wǎng)頁元素的位置那就是使用方法。就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。

一張網(wǎng)頁的全部面積，就是它的大小，通常是由內(nèi)容和css樣式表決定的。
瀏覽器窗口的大小，是在瀏覽器中看到的那部分網(wǎng)頁面積。又叫做viewport（視口）。
如果網(wǎng)頁的內(nèi)容能夠在瀏覽器窗口中全部顯示（也就是不出現(xiàn)滾動條），那么網(wǎng)頁的大小和瀏覽器窗口的大小是相等的。如果不能全部顯示，則滾動瀏覽器窗口，可以顯示出網(wǎng)頁的各個部分。

瀏覽器窗口可視區(qū)大小,瀏覽器窗口尺寸 （不含工具欄和滾動條，只讀模式，不能賦值）

    function getViewport(){
　　　　if (document.compatMode == "BackCompat"){//（兼容quirks模式）
　　　　    //document.compatMode用來判斷當(dāng)前瀏覽器采用的渲染方式。
           //BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟。
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

             瀏覽器窗口內(nèi)部高 window.innerHeight
                      內(nèi)部寬 window.innerWidth

    IE 5 6 7 8      //一般返回的是正確值,documentElement代表根元素，一般指html             
     html文檔所在窗口的當(dāng)前高度 document.documentElement.clientHeight
                          寬度 document.documentElement.clientWidth             
   或者Document對象的body屬性對應(yīng)HTML文檔的Body標(biāo)簽
                    document.body.clientHeight
                    document.body.clientWidth 

網(wǎng)頁大小

    function getPagearea(){
 　　　　if (document.compatMode == "BackCompat"){
 　　　　　　return {//判斷網(wǎng)頁內(nèi)容剛好在瀏覽器中全部顯示，取最大值
 　　　　　　　　width: Math.max(document.body.scrollWidth,
 　　　　　　　　　　　　　　　　 document.body.clientWidth),
 　　　　　　　　height: Math.max(document.body.scrollHeight,
 　　　　　　　　　　　　　　　　  document.body.clientHeight)
 　　　　　　}
 　　　　} else {
 　　　　　　return {
 　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
 　　　　　　　　　　　　　　　　 document.documentElement.clientWidth),
 　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
 　　　　　　　　　　　　　　　　  document.documentElement.clientHeight)
 　　　　　　}
 　　　　} 　　    
    }

網(wǎng)頁實際內(nèi)容的寬度和高度(包含滾動條在內(nèi)的該元素的視覺面積，滾動條滾過的所有長度和寬)

      scrollHeight             
      scrollWidth           
 網(wǎng)頁內(nèi)容寬高(包含滾動條等邊線，會隨著窗口的顯示大小改變)             
          offsetHeight
          offsetHeight=clientHeight+滾動條+邊框             
          offsetWidth

網(wǎng)頁元素的絕對位置，指該元素的左上角相對于整張網(wǎng)頁左上角的坐標(biāo)。這個絕對位置要通過計算才能得到。
首先，每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。所以，只需要將這兩個值進行累加，就可以得到該元素的絕對坐標(biāo)。

     function getElementLeft(element){
 　　　　var actualLeft = element.offsetLeft;
 　　　　var current = element.offsetParent;
 　　　　while (current !== null){
 　　　　　　actualLeft += current.offsetLeft;
 　　　　　　current = current.offsetParent;
 　　　　}
 　　　　return actualLeft; 　　    
    } 　　
 
    function getElementTop(element){ //元素距頂部文檔的距離
 　　　　var actualTop = element.offsetTop;
 　　　　var current = element.offsetParent;
 　　　　while (current !== null){
 　　　　　　actualTop += current.offsetTop;
 　　　　　　current = current.offsetParent;
 　　　　}
 　　　　return actualTop; 　　    
    }
 
 

網(wǎng)頁元素的相對位置，指該元素左上角相對于瀏覽器窗口左上角的坐標(biāo)。
有了絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標(biāo)減去頁面的滾動條滾動的距離就可以了。滾動條滾動的垂直距離，是document對象的scrollTop屬性；滾動條滾動的水平距離是document對象的scrollLeft屬性。

     function getElementViewLeft(element){//offset包括border
 　　　　var actualLeft = element.offsetLeft;
 　　　　var current = element.offsetParent;
 　　　　while (current !== null){
 　　　　　　actualLeft += current.offsetLeft;
 　　　　　　current = current.offsetParent;
 　　　　}
 　　　　if (document.compatMode == "BackCompat"){
 　　　　　　var elementScrollLeft=document.body.scrollLeft;
 　　　　} else {
 　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
 　　　　}
 　　　　return actualLeft-elementScrollLeft; 　　
    } 　　

    function getElementViewTop(element){
 　　　　var actualTop = element.offsetTop;
 　　　　var current = element.offsetParent;
 　　　　while (current !== null){
 　　　　　　actualTop += current. offsetTop;
 　　　　　　current = current.offsetParent;
 　　　　}
 　　　　 if (document.compatMode == "BackCompat"){
 　　　　　　var elementScrollTop=document.body.scrollTop;
 　　　　} else {
 　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
 　　　　}
 　　　　return actualTop-elementScrollTop; 　　
    }

scrollTop和scrollLeft屬性是可以賦值的，并且會立即自動滾動網(wǎng)頁到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁元素的相對位置。另外，element.scrollIntoView()方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。

那就是使用getBoundingClientRect()方法。它返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應(yīng)了該元素的左上角和右下角相對于瀏覽器窗口（viewport）左上角的距離。
所以，網(wǎng)頁元素的相對位置就是this=ele
　　

 var X= this.getBoundingClientRect().left; 　　
 var Y=this.getBoundingClientRect().top;

再加上滾動距離，就可以得到絕對位置
　　

 var X=this.getBoundingClientRect().left+document.documentElement.scrollLeft;
 var Y=this.getBoundingClientRect().top+document.documentElement.scrollTop;

    function getScrollTop() {
        if (window.pageYOffset) {
            scrollPos = window.pageYOffset;//
        }
        else if (document.compatMode && document.compatMode != "BackCompat") {
            scrollPos = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scrollPos = document.body.scrollTop;
        }
        return scrollPos;
    }

    scrollLeft 設(shè)置或者取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離
    scrollTop 設(shè)置或取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離
    offsetLeft 獲取指定對象位于版面或由offsetParent屬性指定的父坐標(biāo)的計算左側(cè)位置
    offsetTop 獲得指定對象相對于版面或由offsetParent屬性指定的父坐標(biāo)的計算頂端位置    

    offsetParent指的是布局中設(shè)置position屬性 Relative Absolute Fixed的父容器，
                從最近的父節(jié)點開始，一層層向上找，直到html的body
                

屏幕的寬高

 1. 整個屏幕的寬高: screen對象: 封裝當(dāng)前屏幕的信息
      完整屏幕寬高: screen.width/height
      去掉任務(wù)欄后，可用的寬高: 
      screen.availWidth/availHeight
              : 如何判斷用戶現(xiàn)在使用設(shè)備的種類: 
       1. screen.width/height
       
2. 獲得鼠標(biāo)的坐標(biāo)位置: 
      獲得鼠標(biāo)相對于屏幕的位置: e.screenX/screenY

圖片描述
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth?

ele.scrollHeight: 獲取對象的滾動高度。?
ele.scrollWidth:獲取對象的滾動寬度
ele.scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離?
ele.scrollTop:設(shè)置或獲取元素到文檔頂部的距離,滾動條拉動的距離?

//可用style.width,height,left,top來設(shè)置
offsetWidth:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度
offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度?
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置?
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置?

event.clientX 相對文檔的水平座標(biāo)?
event.clientY 相對文檔的垂直座標(biāo)?
event.offsetX 相對容器的水平坐標(biāo)?
event.offsetY 相對容器的垂直坐標(biāo)?

document.documentElement.scrollTop 垂直方向滾動的值?
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量
這里是JavaScript中建造遷移轉(zhuǎn)變代碼的常用屬性
頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth?? （包含邊線的寬）;
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight （包含邊線的寬）;
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文項目組上： window.screenTop;
網(wǎng)頁正文項目組左： window.screenLeft;
屏幕辨別率的高： window.screen.height;
屏幕辨別率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;

2、clientHeight
都認為是內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器中可以看到內(nèi)容的這個區(qū)域的高度，一般是最后一個對象條以下到狀況欄以上的這個區(qū)域，與頁面內(nèi)容無關(guān)。

clientHeight 就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。
offsetHeight 和 scrollHeight 都是網(wǎng)頁內(nèi)容高度，只不過當(dāng)網(wǎng)頁內(nèi)容高度< clientHeight 時，scrollHeight = clientHeight，而 offsetHeight 可以< clientHeight。

offsetHeight = 可視區(qū)域 clientHeight + 滾動條 + 邊框。scrollHeight 則是網(wǎng)頁內(nèi)容實際高度。

3、scrollLeft
scrollTop 是“卷”起來的高度值，示例：

 

     
         若是為 p 設(shè)置了scrollTop，這些內(nèi)容可能不會完全顯示。
     
 
 
 

因為為外層元素 p 設(shè)置了 scrollTop，所以內(nèi)層元素會向上卷。

我們已經(jīng)知道 offsetHeight 是自身元素的寬度。
而 scrollHeight 是內(nèi)部元素的絕對寬度，包含內(nèi)部元素的隱蔽的項目組。
上述中 p 的 scrollHeight 為 300(內(nèi)部元素撐起來的高度)，而 p 的 offsetHeight 為 100(自身的高度)。

1.offsetTop?:
當(dāng)前對象到其上級層頂部的間隔.
不可對其進行賦值.設(shè)置對象到頁面頂部的間隔請用style.top屬性.
2.offsetLeft :
當(dāng)前對象到其上級層左邊的間隔.
不可對其進行賦值.設(shè)置對象到頁面左部的間隔請用style.left屬性.
3.offsetWidth :
當(dāng)前對象的寬度.
與style.width屬性的差別在于:如對象的寬度設(shè)定值為百分比寬度，則無論頁面變大還是變小，style.width都返回此百分比，而offsetWidth則返回在不合頁面中對象的寬度值而不是百分比值
4.offsetHeight :
與style.height屬性的差別在于:如對象的寬度設(shè)定值為百分比高度，則無論頁面變大還是變小，style.height都返回此百分比，而offsetHeight則返回在不合頁面中對象的高度值而不是百分比值
5.offsetParent?? :
當(dāng)前對象的上級層對象.
重視.若是對象是包含在一個DIV中時，此DIV不會被當(dāng)做是此對象的上級層，（即對象的上級層會跳過DIV對象）上級層是Table時則不會有題目.
哄騙這個屬性，可以獲得當(dāng)前對象在不合大小的頁面中的絕對地位．
6.scrollLeft :
對象的最左邊到對象在當(dāng)前窗口顯示的局限內(nèi)的左邊的間隔．
便是在呈現(xiàn)了橫向滾動條的景象下，滾動條拉動的間隔．
7.scrollTop
對象的最頂部到對象在當(dāng)前窗口顯示的局限內(nèi)的頂邊的間隔．
便是在呈現(xiàn)了縱向滾動條的景象下，滾動條拉動的間隔．

?一、jQuery獲取的相關(guān)方法
jquery 獲取滾動條高度

獲取瀏覽器顯示區(qū)域的高度 ：

$(window).height(); 

獲取瀏覽器顯示區(qū)域的寬度 ：

$(window).width(); 

獲取頁面的文檔高度 ：
$(document).height();
獲取頁面的文檔寬度 ：$(document).width();

獲取滾動條到頂部的垂直高度 ：

$(document).scrollTop(); 

獲取滾動條到左邊的垂直寬度 ：

$(document).scrollLeft();

計算元素位置和偏移量：

$(id).offset();

offset方法是一個很有用的方法，它返回包裝集中第一個元素的偏移信息。默認情況下是相對body的偏移信息。結(jié)果包含 top和left兩個屬性。

offset(options, results)

options.relativeTo指定相對計算偏移位置的祖先元素。這個元素應(yīng)該是relative或absolute定位。省略則相對body。

options.scroll是否把滾動條計算在內(nèi)，默認TRUE
options.padding　　是否把padding計算在內(nèi)，默認false
options.margin是否把margin計算在內(nèi)，默認true

options.border是否把邊框計算在內(nèi)，默認true