【JS實踐】JS獲取各類高度寬度、瀏覽器窗口滾動條的位置、元素的幾何尺寸【PC&ipad】

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和scrollHeight：是滾動條位置。

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展現：

document.getElementsByClassName("js-new-issue-button")[0].style.width
// "84px"
document.getElementsByClassName("js-new-issue-button")[0].clientWidth
// 104
$(".w_content .product_piece img").css("width");
// "165px"
$(".w_content .product_piece img").width();
// 165

 //獲取元素的縱座標，jQuery中對應的方法：$(ele).offset().top

function getTop(e){
    var offset=e.offsetTop;
    if(e.offsetParent!=null) 
        offset+=getTop(e.offsetParent);
    return offset;
}

//獲取元素的橫座標，jQuery中對應的方法：$(ele).offset().left

function getLeft(e){
    var offset=e.offsetLeft;
    if(e.offsetParent!=null) 
        offset+=getLeft(e.offsetParent);
    return offset;
}

獲取高度時在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