JS宽高（client、offset、scroll）的介绍

问题

今日头条的一道笔试题，offsetWidth、clientWidth、scrollWidth的区别。

分析

JS中document对象的宽高有三种，cilent、offset、scroll

client： clientWidth和clientHeight，clientTop和clientLeft

clientWidth和clientHeight：该属性指的是元素的可视部分宽度和高度，即padding+content，统分为三种情况:

1. 假如元素无padding无滚动
   clientWidth = style.width
2. 假如元素有padding无滚动
   clientWidth = style.width + style.padding*2
3. 假如元素有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有关。统分为三种情况:

1. 假如元素无padding无滚动无border
   offsetWidth = clientWidth = style.width
2. 假如元素有padding无滚动有border
   offsetWidth = style.width = style.padding*2 + border宽度*2
3. 假如元素有padding有滚动有border，且滚动是显示的
   offsetWidth = style.width = style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滚轴宽度 + border宽度*2
   offsetHeight同理

offsetTop和offsetLeft：这个需要先了解offsetParent，规则如下

1. 如果当前元素的父级元素没有进行css定位（position为absolute或relative），offsetParent为body
2. 如果当前元素的父级元素中有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计算规则如下

1. 无滚动轴时：
   scrollWidth = clientWhidth = style.width + style.padding*2
2. 有滚动轴时：
   scrollWidth = 实际内容的宽度 + padding*2
   scrollHeight同理

scrollTop和scrollLeft：这对元素是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的宽度和高度。

style和body代码同上。结果如图：

更详细的介绍，请点击