height、clientHeight、scrollHeight、offsetHeight区别

注意：以下信息的获取环境为Chrome谷歌浏览器。

height、clientHeight、scrollHeight和offsetHeight取的为HTML盒模型不同部分的组合值。

而对于一个HTML盒模型，共包括以下四个部分：

1、元素 element （使用height和width确定的区域）

元素区域共包括两部分，一是展示区域，二是下拉条（宽度为17px）

2、内边距 padding

3、边框 border

4、外边距 margin

一、height

height 的值对应盒模型中的元素element部分，包括展示区域和下拉条。

注意：

1、height高度跟其他的高度有点不一样,在JavaScript中它是属于对象的style对象属性中的一个成员,它的值是一个字符类型的,而另外三个高度的值是int类型的,它们是对象的属性.因此这样document.body.height就会提示undenifine,而必须写成document.body.style.height

2、只有内联样式，JS中才能获取height。通过外联样式或外部样式书写的height，JS中无法获取height值。

<div id="div1" style="height:100px;width:100px;"></div>      //只有内联样式

二、clientHeight

clientHeight 的值对应盒模型中元素element的展示区域和内边距。

注意：不包括下拉条。

三、scrollHeight

scrollHeight 的值对应盒模型中元素element的展示区域、内边距、边框和外边距。

注意：不包括下拉条。

不同浏览器对scrollHeight的实现不同，建议少用。

四、offsetHeight

offsetHeight 的值对应盒模型中元素element部分(包括下拉条)、内边距和边框。

代码

    var demo21=document.getElementById("div1");
    console.group("测试常用高度值");
    console.log(demo21.style.height);
    console.log(demo21.clientHeight);
    console.log(demo21.offsetHeight);
    console.log(demo21.scrollHeight);
    console.groupEnd();