基本介紹

$(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

總結

以上是生活随笔為你收集整理的c语言中width获取窗体宽度,获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。