獲取屏幕寬高width(),outerWidth,innerWidth,clientWidth的區別

基本介紹

$(window).width()與$(window).height()

$(window).width()與$(window).height()：得到的是屏幕可視區域的寬高，不包括滾動條與工具條。

$(window).width() = width + padding
$(window).height() = height + padding

document.documentElement.clientWidth與document.documentElement.clientHeight

document.documentElement.clientWidth與document.documentElement.clientHeight：得到的是屏幕可視區域的寬高，不包括滾動條與工具條，跟jquery的(window).width()與(window).height()得到的結果是同樣的。

document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding

window.innerWidth與window.innerHeight

window.innerWidth與window.innerHeight：得到的是可視區域的寬高，可是window.innerWidth寬度包含了縱向滾動條的寬度，window.innerHeight高度包含了橫向滾動條的高度(IE8以及低版本瀏覽器不支持)。

window.innerWidth = width + padding + border + 縱向滾動條寬度
window.innerHeight = height + padding + border + 橫向滾動條高度

window.outerWidth與window.outerHeight

window.outerWidth與window.outerHeight：得到的是加上工具條與滾動條窗口的寬度與高度。

window.outerWidth = width + padding + border + 縱向滾動條寬度
window.outerHeight = height + padding + border + 橫向滾動條高度 + 工具條高度

document.body.clientWidth與document.body.clientHeight

document.body.clientWidth與document.body.clientHeight：document.body.clientWidth得到的也是可視區域的寬度，可是document.body.clientHeight得到的是body內容的高度，若是內容只有200px，那麼這個高度也是200px,若是想經過它獲得屏幕可視區域的寬高，須要樣式設置，以下：

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

最關鍵的是：body的height:100%影響document.body.clientHeight的值。
body的margin:0,padding:0影響document.body.clientWidth的值。

offsetWidth & offsetHeight

返回自己的寬高 + padding + border + 滾動條

offsetLeft & offsetTop

全部HTML元素擁有offsetLeft和offsetTop屬性來返回元素的X和Y座標

1.相對於已定位元素的後代元素和一些其餘元素（表格單元），這些屬性返回的座標是相對於祖先元素
2.通常元素，則是相對於文檔，返回的是文檔座標

offsetParent屬性指定這些屬性所相對的父元素，若是offsetParent爲null，則這些屬性都是文檔座標

//用offsetLeft和offsetTop來計算e的位置
function getElementPosition(e){
    var x = 0,y = 0;
    while(e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }
    return {
        x : x,
        y : y
    };
}

scrollWidth & scrollHeight

這兩個屬性是元素的內容區域加上內邊距，在加上任何溢出內容的尺寸.

所以，若是沒有溢出時，這些屬性與clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滾動條的位置

scrollLeft和scrollTop都是可寫的屬性，經過設置它們來讓元素中的內容滾動。

兼容性

1.window innerWidth 和 innerHeight 屬性與outerWidth和outerHeight屬性IE8以及如下不支持。

2.測試瀏覽器IE，火狐，谷歌，360瀏覽器，Safari都支持document.documentElement.clientWidth與document.documentElement.clientHeight。

結論

獲取屏幕的可視區域的寬高可以使用jquery的方式得到，也能夠使用原生js得到，即：

document.documentElement.clientWidth與document.documentElement.clientHeight