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();

offsetHeight、clientHeight、scrollHeight、offsetLeft 区别笔记

原文：https://www.cnblogs.com/zjx304/p/12067505.html