JS獲取各種高度寬度、瀏覽器窗口滾動條的位置、元素的幾何尺寸
JS獲取各種高度寬度：瀏覽器窗口滾動條的位置、元素的幾何尺寸
1）關于 pageX, clienX,offsetX,layerX
-
pageX：鼠標在頁面上的位置，從頁面左上角開始，即是以頁面為參考點，不隨滑動條移動而變化
-
clientX：鼠標在頁面上可視區域的位置，從瀏覽器可視區域左上角開始，即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.
-
offsetX：IE特有,鼠標相比較于觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值
-
layerX：FF特有,鼠標相比較于當前坐標系的位置,即如果觸發元素沒有設置絕對定位或相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的border區域的左上角為參考點，也就是當觸發元素設置了相對或者絕對定位后,layerX和offsetX就相等。
2）關于元素尺寸、位置和溢出的更多信息
-
只讀屬性offsetWidth和offsetHeight：以css像素返回它的屏幕尺寸。返回尺寸包含元素的邊框以內，出去外邊距。
-
offsetLeft和offsetTop屬性：返回元素的X和Y坐標。offsetParent屬性指定這個屬性相對的父元素。
-
ClientWidth和clientHeight：類似offsetWidth和offsetHeight，不同的是不包含邊框大小，只包含內邊距以內。如果瀏覽器在內邊距和邊框之間添加了滾動條，還不會包含滾動條。注意，<i>和<code>和<span>這類內聯元素，clientWidth和clientHeight總是返回0；
-
clientLeft和clientTop屬性：沒什么用，返回內邊距的外邊緣和邊框的外邊緣之間水平距離和垂直距離。
-
scrollWidth和scrollHeight：內容+內邊距+溢出。當無溢出時，和clientWidth和clientHeight相等。
-
scrollLeft和scrollTop：是滾動條位置。
3）查詢元素的幾何尺寸
-
判斷一個元素最簡單的方法是調用它的getBoundingClientRect()方法。該方法在IE5中引入，而在現在所有瀏覽器中都實現了。返回一個有left right top bottom 等屬性的對象。left top表示元素左上角的X和Y坐標，right bottom屬性表示元素的右下角的X和Y坐標。
4）判斷瀏覽器窗口滾動條的位置
-
所有瀏覽器支持window.pageXOffset和window.pageYOffset. 除了IE8以下，所有支持scrollLeft和scrollTop;
-
document.compatMode // 有兩種可能的返回值：BackCompat和CSS1Compat，對其解釋如下： ［BackCompat］Standards-compliant mode is not switched on. (Quirks Mode) ［CSS1Compat］ Standards-compliant mode is switched on. (Standards Mode)
5）設置鼠標滾動值
-
方法一：scrollLeft和scrollTop屬性可以用來設置瀏覽器滾動，如 document.body.scrollTop = 100；
-
方法二：在jquery中，使用.scrollTop(value) 和 .scrollLeft() 來設置scrollTop的值。
相關DEMO展示：
| 1 | document.getElementsByClassName("js-new-issue-button")[0].style.width |
| 2 | // "84px" |
| 3 | document.getElementsByClassName("js-new-issue-button")[0].clientWidth |
| 4 | // 104 |
| 5 | $(".w_content .product_piece img").css("width"); |
| 6 | // "165px" |
| 7 | $(".w_content .product_piece img").width(); |
| 8 | // 165 |
//獲取元素的縱坐標
| 1 | function getTop(e){ |
| 2 | var offset=e.offsetTop; |
| 3 | if(e.offsetParent!=null) |
| 4 | offset+=getTop(e.offsetParent); |
| 5 | return offset; |
| 6 | } |
//獲取元素的橫坐標
| 1 | function getLeft(e){ |
| 2 | var offset=e.offsetLeft; |
| 3 | if(e.offsetParent!=null) |
| 4 | offset+=getLeft(e.offsetParent); |
| 5 | return offset; |
| 6 | } |
獲取高度時在iPad中遇到問題：
要做自適應，并且隨著屏幕顛來倒去改變菜單高度的效果，于是在ipad上遇到了糾結的問題：
屏幕工作區高度：window.screen.height（在ipad中，旋轉屏幕時，該值不會發生變化）
屏幕工作區寬度：window.screen.width（在ipad中，旋轉屏幕時，該值不會發生變化）
屏幕可用工作區高度：window.screen.availHeight （在ipad中，旋轉屏幕時，該值不會發生變化）
屏幕可用工作區寬度：window.screen.availWidth（在ipad中，旋轉屏幕時，該值不會發生變化）
$(window).height() // 在ipad中獲取的高度會與pc上預期的不一樣，有一個（ 屏幕工作區高度 - 屏幕可用工作區高度）的偏差
$(window).width() // 在ipad中獲取的寬度會與pc上預期的不一樣，有一個（ 屏幕工作區寬度 - 屏幕可用工作區寬度）的偏差
在沒有聲明DOCTYPE的IE中，瀏覽器顯示窗口大小只能以下獲取：
document.body.offsetWidth document.body.offsetHeight
在聲明了DOCTYPE的瀏覽器中，可以用以下來獲取瀏覽器顯示窗口大小：
document.documentElement.clientWidth document.documentElement.clientHeight
IE，FF，Safari皆支持該方法，opera雖支持該屬性，但是返回的是頁面尺寸；
同時，除了IE以外的所有瀏覽器都將此信息保存在window對象中，可以用以下獲取：
window.innerWidth window.innerHeight