JQuery獲取瀏覽器窗口的可視區域高度和寬度,滾動條高度
alert($(window).height()); //瀏覽器時下窗口可視區域高度
alert($(document).height()); //瀏覽器時下窗口文檔的高度
alert($(document.body).height());//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器時下窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器時下窗口可視區域寬度
alert($(document).width());//瀏覽器時下窗口文檔對於象寬度
alert($(document.body).width());//瀏覽器時下窗口文檔body的高度
alert($(document.body).outerWidth(true));//瀏覽器時下窗口文檔body的總寬度 包括border padding margin
alert($(document).scrollTop()); //獲取滾動條到頂部的垂直高度 alert($(document).scrollLeft()); //獲取滾動條到左邊的垂直寬度
獲取當前鼠標的x、y位置位置的代碼
1 <div id="testDiv"> 放在我上面 </div>
2 <script type="text/javascript">
3 $('#testDiv').mousemove(function(e) { 4 var xx = e.originalEvent.x || e.originalEvent.layerX || 0; 5 var yy = e.originalEvent.y || e.originalEvent.layerY || 0; 6 $(this).text(xx + '---' + yy); 7 }); 8 </script>
原生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；document.documentElement.clientHeight 隨着頁面的縮放，值會變化。
-
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 // "84px" 內容區域 2 document.getElementsByClassName("js-new-issue-button")[0].clientWidth // 104 內邊距以內 3 $(".w_content .product_piece img").css("width"); // "165px" 4 $(".w_content .product_piece img").width(); // 165
//獲取元素的縱坐標 巧妙回調
function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; }
//獲取元素的橫坐標
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