上面示例在怪异模式和标准模式的浏览器中解析结果差异很大，其中怪异模式解析返回宽度为 21 像素，高度为 21 像素；而在标准模式的浏览器中返回高度和宽度都为 19 像素。
设计一个简单的盒子，盒子的 height 值为 200 像素，width 值为 200 像素，边框显示为 50 像素，补白区域定义为 50 像素。内部包含信息框，其宽度设置为 400 像素，高度也设置为 400 像素，即定义盒子的内容区域为（400px，400px）。 <div id="div" style="height:200px;width:200px;border:solid 50pxred;overflow:auto;padding:50px;"> <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div> 演示效果如下： 现在分别调用 offsetHeight、scrollHeight、clientHeight 属性，可以看到获取不同区域的高度和宽度。 var div = document.getElementById("div"); var hc = div.clientHeight; //可视内容高度为283像素 var ho = div.offsetHeight; //占据页面总高度为400像素 var hs = div.scrollHeight; //展开滚动内容总高度为452像素 演示效果如下：
查看 offsetHeight、scrollHeight、clientHeight 这 3 个属性的不同，具体说明如下： clientHeight = padding-top+height+border-buttom-width- 滚动条的宽度 offsetHeight = border-top-width+padding-top+height+padding-buttom+border-buttom-width scrollHeight = padding-top+包含内容的完全高度+padding-bottom 上面围绕元素高度进行说明，针对宽度的计算方式可以以此类推。
offsetWidth 和 offsetHeight 是获取元素宽度和高度的最好方法，但是当元素隐藏显示时，即设置样式属性 display 的值为 none 时，offsetWidth 和 offsetHeight 属性返回值都为 0。

编程帮 ，一个分享编程知识的公众号。跟着 站长 一起学习，每天都有进步。

通俗易懂，深入浅出，一篇文章只讲一个知识点。

文章不深奥，不需要钻研，在公交、在地铁、在厕所都可以阅读，随时随地涨姿势。

文章不涉及代码，不烧脑细胞，人人都可以学习。

当你决定关注「编程帮」，你已然超越了90%的程序员！

微信扫描二维码关注

C语言入门

C语言编译器

C语言项目案例

C++11

socket

Makefile

OpenCV

Unity 3D

Python

Python并发编程

TensorFlow

Django

NumPy

Linux

Shell

Java教程

Java Swing

Servlet

JSP教程

Struts2

Maven

Spring

Spring MVC

Spring Boot

Spring Cloud

Hibernate

Mybatis

MySQL教程

MySQL函数

NoSQL

Redis

MongoDB

HBase

MATLAB

JavaScript

Bootstrap

CSS教程

TCP/IP

Android教程

Docker

VIP视频

一对一答疑

Linux多系统并存的GRUB配置文件内容分析

Java Swing Timer：计时器组件

最早截止时间优先（EDF）算法详解

C++ swap函数模板及其用法

C语言函数调用详解（从中发现程序运行的秘密）

Android USB主机模式开发教程

汇编语言CreateFile函数：创建新文件或者打开已有文件

JS语句完全攻略

SNMP报文格式剖析（非常详细）

Python数据分析学习路线（知识点汇总）