JS寬高（client、offset、scroll）的介紹

mj 發布于2019-08-20 18:21 / 2346人閱讀

摘要：問題今日頭條的一道筆試題，的區別。結果如圖更詳細的介紹，請點擊

問題

今日頭條的一道筆試題，offsetWidth、clientWidth、scrollWidth的區別。

分析

JS中document對象的寬高有三種，cilent、offset、scroll

client： clientWidth和clientHeight，clientTop和clientLeft

clientWidth和clientHeight：該屬性指的是元素的可視部分寬度和高度，即padding+content，統分為三種情況:

假如元素無padding無滾動
clientWidth = style.width

假如元素有padding無滾動
clientWidth = style.width + style.padding*2

假如元素有padding有滾動，且滾動是顯示的
clientWidth = style.width + style.padding*2 - 滾動軸寬度
clientHeight同理

clientTop和clientLeft ：這一對屬性是用來讀取元素的border的寬度和高度的

clientTop = border-top 的 border-width

clientLeft = border-left 的 border-width

        body {
            width: 500px;
            height: 500px;
            border: 20px solid red;
            margin: 20px;
            padding: 10px;
        }
        div {
            width: 300px;
            height: 300px;
            margin: 10px;
            padding: 20px;
            border: 20px solid gray;
            overflow: auto;
        }
   
        
            
                我是文字

                我是文字

                我是文字

                我是文字

                我是文字

結果如圖:

offset：offsetWidth和offsetHeight，offsetTop和offsetLeft

offsetWidth和offsetHeight：這一對屬性指的是元素的border+padding+content的寬度和高度
該屬性和其內部的內容是否超出元素大小無關，只和本來設置的border以及width和height有關。統分為三種情況:

假如元素無padding無滾動無border
offsetWidth = clientWidth = style.width

假如元素有padding無滾動有border
offsetWidth = style.width = style.padding*2 + border寬度*2

假如元素有padding有滾動有border，且滾動是顯示的
offsetWidth = style.width = style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滾軸寬度 + border寬度*2
offsetHeight同理

offsetTop和offsetLeft：這個需要先了解offsetParent，規則如下

如果當前元素的父級元素沒有進行css定位（position為absolute或relative），offsetParent為body

如果當前元素的父級元素中有ccss定位(position為absolute或relative)，offsetParent取最近的那個父級元素

offsetTop和offsetLeft的計算規則如下：

在IE8/9/10以及chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border寬度) + (offsetParent的padding-left) + (當前元素的margin-left)

在FireFox中
offsetLeft = (offsetParent的margin-left) + (offsetParent的padding-left) + (當前元素的margin-left)
offsetTop同理

style和body代碼同上。結果如圖：

scroll：scrollWidth和scrollHeight，scrollTop和scrollLeft

scrollWidth和scrollHeight：細分為body和其他元素，這里不對body做介紹(詳細介紹請點擊)

在某div中scrollWidth和scrollHeight計算規則如下

無滾動軸時：
scrollWidth = clientWhidth = style.width + style.padding*2

有滾動軸時：
scrollWidth = 實際內容的寬度 + padding*2
scrollHeight同理

scrollTop和scrollLeft：這對元素是可讀寫的，指的是當元素其中的內容超出其寬高的時候，元素被卷起的寬度和高度。

style和body代碼同上。結果如圖：

更詳細的介紹，請點擊

云服務器 GPU云服務器 js滾動scroll js的課程介紹關于js的介紹 js獲取圖寬高

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

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

JavaScript中的各種寬高屬性

摘要：在中，存在著多的關于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當前顯示文檔的。如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。在js中，存在著N多的關于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 評論0 收藏0
JS、jQuery各種寬高屬性

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

CntChen 2019-08-22 10:46 評論0 收藏0
網頁中的各種上下左右寬高值

三種類型offset client scroll offset 只讀屬性。 width/height——顯示出來的屏幕尺寸 top/left——相對于定位父元素的絕對位置 client 只讀屬性。 width/height——不帶邊框的offset，也不包含滾動條寬度 top/left——內邊距的外邊緣與邊框外邊緣的距離，通常是邊框寬度 scroll width/height——只讀，帶...

tyheist 2019-08-02 16:11 評論0 收藏0
網頁中的各種上下左右寬高值

三種類型offset client scroll offset 只讀屬性。 width/height——顯示出來的屏幕尺寸 top/left——相對于定位父元素的絕對位置 client 只讀屬性。 width/height——不帶邊框的offset，也不包含滾動條寬度 top/left——內邊距的外邊緣與邊框外邊緣的距離，通常是邊框寬度 scroll width/height——只讀，帶...

EastWoodYang 2019-08-23 16:45 評論0 收藏0
js 獲取窗口、屏幕、頁面元素寬高+位置（兼容ie）

摘要：獲取各種寬高位置先上總結，再細細道來總結獲取屏幕寬高總區域可用區域有些手機存在底部任務欄，一般直接用第一個就獲取瀏覽器寬高獲取瀏覽器位置獲取頁面寬高方法方法移動端，一般用就了獲取寬高內部寬高，不包滾動條和整體寬高滾動條含被隱藏的內部 js 獲取各種寬高+位置 -- 先上總結，再細細道來總結獲取屏幕寬高 window.screen.width / window.scr...

Yuanf 2019-08-22 13:48 評論0 收藏0