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

時間 2019-11-16

標籤 client offset scroll 介紹欄目 JavaScript 简体版

原文原文鏈接

問題

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

分析

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

client： clientWidth和clientHeight，clientTop和clientLeft

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

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

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

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;
        }
   
        <body>
            <div id="app">
                我是文字<br>
                我是文字<br>
                我是文字<br>
                我是文字<br>
                我是文字<br>
            </div>
        </body>

結果如圖:code

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，規則以下blog

若是當前元素的父級元素沒有進行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代碼同上。結果如圖：ci

scroll：scrollWidth和scrollHeight，scrollTop和scrollLeft

scrollWidth和scrollHeight：細分爲body和其餘元素，這裏不對body作介紹(詳細介紹請點擊)get

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

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

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

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

更詳細的介紹，請點擊

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。