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

woshicixide 發布于2019-08-21 12:02 / 2443人閱讀

摘要：基本介紹與與獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。縱向滾動條寬度橫向滾動條高度與與獲得的是加上工具條與滾動條窗口的寬度與高度。兼容性和屬性與和屬性以及以下不支持。

基本介紹 $(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

云服務器 GPU云服務器 asp獲取屏幕的寬高屏幕寬高 js獲取圖寬高 js獲取移動設備寬高

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87374.html

JavaScript獲取瀏覽器、元素、屏幕的寬高尺寸

摘要：一瀏覽器視口的寬高瀏覽器視口寬度單位像素，如果存在滾動條則包括它。二瀏覽器的寬高整個瀏覽器窗口的高度單位像素，包括側邊欄如果存在窗口鑲邊和窗口調正邊框。語法示例六屏幕的寬高屏幕分辨率寬高。 showImg(https://segmentfault.com/img/remote/1460000014929763); 版權聲明轉載請告知并注明來源作者作者：唐金健網絡昵稱：御焱 ...

Amio 2019-08-22 17:22 評論0 收藏0
JS、jQuery各種寬高屬性

摘要：下各種寬高和下寬高分為掛載在對象和對象下的寬高屬性，先說下和的區別對象表示瀏覽器中打開的窗口，對象可以省略，比如可以簡寫為對象是對象的一部分，那么我們可以寫成，瀏覽器的文檔成為對象下的寬高屬性瀏覽器窗口內部寬度瀏覽器窗口內部高度瀏覽器窗口外 JS下各種寬高 Window和Document:JS下寬高分為掛載在Window對象和Document對象下的寬高屬性，先說下Window和Do...

CntChen 2019-08-22 10:46 評論0 收藏0
JS動態解析瀏覽器和網頁的各種寬高屬性

摘要：獲得各種寬高的屬性還有公式網頁可見區域高滾動條寬度測試的文字網頁可見區域寬滾動條寬度測試的文字的總高度滾動條寬度邊框寬度測試的文字的總寬度滾動條寬度邊框寬度測試的文字的解釋元素內容高度的度量，包括由于溢出導致的視圖中不可見內容滾動總高度獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

Luosunce 2019-08-02 15:26 評論0 收藏0
JS動態解析瀏覽器和網頁的各種寬高屬性

摘要：獲得各種寬高的屬性還有公式網頁可見區域高滾動條寬度測試的文字網頁可見區域寬滾動條寬度測試的文字的總高度滾動條寬度邊框寬度測試的文字的總寬度滾動條寬度邊框寬度測試的文字的解釋元素內容高度的度量，包括由于溢出導致的視圖中不可見內容滾動總高度獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

XiNGRZ 2019-08-23 18:26 評論0 收藏0
JS動態解析瀏覽器和網頁的各種寬高屬性

摘要：獲得各種寬高的屬性還有公式網頁可見區域高滾動條寬度測試的文字網頁可見區域寬滾動條寬度測試的文字的總高度滾動條寬度邊框寬度測試的文字的總寬度滾動條寬度邊框寬度測試的文字的解釋元素內容高度的度量，包括由于溢出導致的視圖中不可見內容滾動總高度獲得各種寬高的屬性還有公式 body { padding: 50px; height: 500px; ...

galois 2019-08-30 11:19 評論0 收藏0