javascript中常用座標屬性offset、scroll、client

標籤：bsp   工作區   定位   idt   學習   window   scrolltop   相對   問題   

     今天在學習js的時候覺得這個問題比較容易搞混，所以自己畫了一個簡單的圖，並且用js控制台裡面輸出測試了下，便於理解。 1、在文檔（document）對象裡面用：

scrollWidth/Height:擷取對象的滾動寬度(捲軸可以滾動的寬度，相當於整個頁面的總寬度的樣子--網頁本文全寬)

scrollLeft/Top:設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離（頁面利用捲軸滾動到右邊時，隱藏在捲軸左邊的頁面寬度---頁面被捲去左邊）

  2、在節點對象裡面用：   offsetLeft/Top:擷取對象相對於版面（css裡面沒有進行定位，則offsetParent取值為根項目進行計算）或由 offsetParent 屬性指定的父座標的計算左側位置（當有css定位時，當前對象相對與offsetParent元素的距離）  offsetWidth/Height ( width+padding+border)擷取當前對象的寬度。style.width也是當前對象的寬度(width+padding+border)。區別：1)style.width傳回值除了數字外還帶有單位px；           2)如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小，style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值；           3)如果沒有給 HTML 元素指定過 width樣式，則 style.width 返回的是Null 字元串；  offsetLeft :當前對象到其上級層左邊的距離。不能對其進行賦值.設定對象到其上級層左邊的距離請用style.left屬性。style.left當前對象到其上級層左邊的距離。區別：1)style.left傳回值除了數字外還帶有單位px；           2)如對象到其上級層左邊的距離設定值為百分比，style.left返回此百分比,而offsetLeft則返回到其上級層左邊的距離的值；           3)如果沒有給 HTML 元素指定過 left樣式，則 style.left返回的是Null 字元串；注意：如果上級層為body，由於IE、FF對padding、margin的解釋不一樣所以要明確規定處理不是下列的區別就不成立了。IE   1)如果Div的上級層是body，而div與body之間有個div，如body->div->divo；divo的offsetTop=div的padding+margin+boder；       2）如果Div的上級層是body，如body>divo；divo的offsetTop=div的padding+margin+boder；             這divo的offsetTop=divo的margin >body.padding則為divo的margin，否則為body.padding誰大是誰？FF  上述兩種情況：offsetTop=margin+padding ;(IE與FF中的body預設padding為10)在IE6.0 FF3.6.13  clientWidth/Height: 擷取對象可見內容的寬度，不包括捲軸，不包括邊框；   clientLeft/Top: 擷取對象的border寬度    3、事件裡面用的：

event.clientX 相對文檔的水平座標

event.clientY 相對文檔的垂直座標

     event.offsetX 相對容器的水平座標     event.offsetY 相對容器的垂直座標  4、螢幕的：     window.screenTop 網頁本文部分上     window.screenLfet 網頁本文部分左      window.screen.height  螢幕分辨律的高     window.screen.left  螢幕分辨律的寬      window.screen.availHeight  螢幕可用工作區的高度     window.screen.availWidth  螢幕可用工作區的寬度      document.documentElement.scrollTop 垂直方向滾動的值  網頁可見地區寬： document.body.clientWidth;網頁可見地區高： document.body.clientHeight;
網頁可見地區寬： document.body.offsetWidth   (包括邊線的寬);
網頁可見地區高： document.body.offsetHeight  (包括邊線的寬);
網頁本文全文寬： document.body.scrollWidth;
網頁本文全文高： document.body.scrollHeight;
網頁被捲去的高： document.body.scrollTop;
網頁被捲去的左： document.body.scrollLeft;
網頁本文部分上： window.screenTop;
網頁本文部分左： window.screenLeft;
螢幕解析度的高： window.screen.height;
螢幕解析度的寬： window.screen.width;
螢幕可用工作區高度： window.screen.availHeight;
螢幕可用工作區寬度：window.screen.availWidth;

javascript中常用座標屬性offset、scroll、client