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代码同上。结果如图：

更详细的介绍，请点击