offsetHeight、clientHeight、scrollHeight、offsetLeft 区别笔记

一、可视区，页面内容，浏览器宽高

• 1.可视区域：可显示网页内容的区域。

  • 打开浏览器的控制台，拉动控制台宽/高的时候网页可视区域的宽高也会随之改变，所以可视区域可随意改变。

  • 可视区宽高跟网页内容宽高没关系。

  • 那可以理解为：可视区域 = 浏览器的页面显示部分

  • 先普及一下关于浏览器宽高知识点（了解的可以跳过）：

    
    
     

    
    • window.outerHeight ：浏览器高度。
    • window.outerWidth ：浏览器宽度。
    • window.innerHeight ：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。
    • window.innerWidth ：浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。
    • 工具栏高/宽度 ：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。
• 可视区域宽高 = window.innerHeight，可随着浏览器窗口大小自动改变
  jq获取可视区域宽高：$(window).height()；

---

• 2.页面内容

  • 页面内容宽高：指网页htrml中body的宽高
  • 普及一下关于网页内容的知识点(了解可跳过)

 

• 具体

  • body.offsetHeight ：body总高度。

  • body.offsetWidth ：body总宽度。

  • body.clientHeight ：body展示的高度；表示body在浏览器内显示的区域高度。

  • body.clientWidth ：body展示的宽度；表示body在浏览器内显示的区域宽度。

  • 滚动条高度/宽度 ：如高度，可通过浏览器内页面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。

• 页面宽高 = document.body.clientHeight
  jq:获取页面宽高：$(document.body).height();

1. ele.offerWidth|offerHeight: 元素总的宽高(包括滚动距离)
2. body.clientWidth|clientHeight: 一般用来描述文旦视口的大小

二、offsetHeight & offsetWidth

1.offsetHeight & offsetWidth

• 只读属性，只有数字值没有单位，包含content+padding+border
• display:none时，值为0
• 包含滚动条和边框

2.offsetleft/top/rihgt/bottom 偏移距离

确定偏移参考元素offsetParent是关键，规则如下：

（1）.如果当前元素具有定父元素，那么offsetParent返回值是第一个定位元素。

（2）.如果当前没有定位父元素，那么offsetParent返回值是body。

情况1

 情况2

情况3：当前元素为postion:absolute

三、clientHeight & clientWidth

1.clientHeight & clientWidth

• 同offsetHeight，包含content+padding
• 区别在不包含滚动条和边框

2.clientleft/top/rihgt/bottom

 

 

 四、scrollHeight & scrollWidth

1.scrollHeight & scrollWidth

　　最大区别包含由于出现滚动条而导致溢出不可见的部分

情况1：垂直方位没有出现滚动条，那么scrollHeight值与clientHeight值相同

情况2：垂直方位出现滚动条，那么scrollHeight值则等于当前元素content+padding+ border +margin+父元素的padding  即滚动到父元素的padding-bottom底部距离

 scrollHeight = inner(hegiht:200 + paddingx2: 2  + borderx2: 6  marginx2: 4 ) + ant(paddingx2: 40 ) =  252

2.scrollleft/top/rihgt/bottom

 scrollLeft属性可以返回或者设置元素内容向左滚动的尺寸。