在html里,width与height是最常用也是最基础的两个属性,因此,在js里,我们也经常需要操作这两个属性。js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清楚这三者之间的区别,经常望着这三个属性满脸问号,不知道该用哪个。所以今天就来看一下这三个属相的区别。

JUST SHUTUP AND SHOW ME YOUR CODE!!

ok,不多说话,看代码。

<style>
.out{
width:100px;
height:100px;
background:red;
}
</style>
<body>
<div class="out"></div>
</body>

我们这里创建了一个宽100,高100的红色方块,没有border,没有margin,也没有padding。我们先看这种情况下三个属性的值

var out = document.querySelector('.out');
console.log(out.clientHeight); //100
console.log(out.offsetHeight); //100
console.log(out.scrollHeight); //100

恩,值都一样,似乎看不出来什么,现在我们加一个padding

<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;

}
</style>
<body>
<div class="out"></div>
</body>

方块更大了,我们看一下这种情况下三个属性的值

var out = document.querySelector('.out');
console.log(out.clientHeight); //140
console.log(out.offsetHeight); //140
console.log(out.scrollHeight); //140

恩,值依然都相同,都是可视区高度+padding(不是content的高度+padding,原因一会说),现在我们再加一个border

<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;
border:10px solid black;

}
</style>
<body>
<div class="out"></div>
</body>

方块外面多了一个10像素的边框,我们再看一下三个属性的值

var out = document.querySelector('.out');
console.log(out.clientHeight); //140
console.log(out.offsetHeight); //160
console.log(out.scrollHeight); //140

注意,这时候发生变化了,clientHeight和scrollHeight没变化,offsetHeight变成了160!

观察到这里我们可以得到一个简易的结论:

clientHeight = 可视区高度 + padding

offsetHeight = content高度 + padding + border

scrollHeight = 可视区高度 + padding

仔细,仔细观察上面的结论(表述未必完全准确,待会会解释),scrollHeight与clientHeight一样(没有滚动的情况下),先不说,看offsetHeight与clientHeight。

offsetHeight相比clientHeight多了boder的宽度,然而可视区高度content高度又有什么不同呢?

看下面的图,我强制给方块添加了滚动条

<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;
border:10px solid black;
overflow:scroll;

}
</style>
<body>
<div class="out"></div>
</body>

此时的三个属性值为

var out = document.querySelector('.out');
console.log(out.clientHeight); //128
console.log(out.offsetHeight); //160
console.log(out.scrollHeight); //128

绿色的线表示可视区高度,蓝色的线表示content的高度

由于方块出现了滚动条,滚动条占用了一定的大小,可视区因此变小了,所以此时的方块,可视区高度 < content高度

了解了这一点,我们就知道,offsetHeight并不是仅仅比clientHeight多了border的宽度,即使没有border,但是有滚动条的情况下,clientHeight是要小于offsetHeight的

下面再来看scrollHeight

为外面的方块添加一个子方块

<style>
.out{
width:100px;
height:100px;
background:red;
padding:20px;
border:10px solid black;
}
.inner{
width:200px;
height:200px;
background:blue;
}

</style>
<body>
<div class="out">
<div class="inner"></div>
</div>
</body>

此时的scrollHeight的值为:

var out = document.querySelector('.out');
console.log(out.scrollHeight); //220

值为220,即scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值

注:当有滚动条时,padding-bottom和padding-right是无效的,不会进行计算,也不会进行渲染(chrome除外)

再次注意,这里计算时,对父元素的padding值应该只计算一个(即使父元素上下padding都设置了值),可以认为只计算padding-top值(实验证明确实计算的是padding-top值,如果不设置padding-top,只设置padding-bottom,那该值是无效的)

截止到目前为止,mac上的chrome(版本:51.0.2704.106 (64-bit))对scrollHeight的计算和渲染应该是错误的(不确定是不是错误,欢迎指正),因为chrome计算scrollHeight时,计算了padding-bottom,公式如下:

scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值 + 父元素的padding-bottom值

chrome不仅是这样计算的,也是这样渲染的!!

  

如上图,padding-bottom在mac上的chrome上起了作用,而在其他浏览器上没有作用(padding-right也是如此)


以上是关于height的三个属性的一些说明,width的三个属性同理,就不再多说,这里可以总结一下:

clientHeight = 可视区高度 + padding

offsetHeight = content高度 + padding + border

当内部元素高度超出了外部元素高度时

  scrollHeight = 内部元素的实际高度(content+padding+border+margin) + 父元素的padding-top值

当内部元素高度小于外部元素高度是

  scrollHeight = 可视区高度 + padding


既然说完了这三个属性,就顺便说说相关的clientTop,offsetTop,和scrollTop吧

clientTop是指当前可视对象距离上一级元素的距离,因为当前可视对象不包含border,所以通常来说,clientTop就等于border-top值

offsetTop是指当前元素到body元素的距离,因为当前元素包含了border,所以计算时要从margin值开始,依次向外加

scrollTop是指可滚动元素超出当前窗口显示范围的高度,超出多少与当前窗口的border的宽度无关

clientHeight,offsetHeight与scrollHeight的相关知识的更多相关文章

  1. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  2. 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...

  3. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  4. 详解clientHeight、offsetHeight、scrollHeight

    关于clientHeight.offsetHeight.scrollHeight   window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.av ...

  5. height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

    1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. ...

  6. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  7. 浅谈style.height、clientHeight、offsetHeight、scrollHeight

    先分别介绍以下,以下资料来自MDN HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数. Element.clie ...

  8. 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥

    scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...

  9. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

随机推荐

  1. 泛型的上限和下限的Demo

    Main Class package Comparator.Bean; import java.math.BigDecimal; import java.util.List; import java. ...

  2. Android Studio鼠标悬停显示注释

    Android Studio鼠标悬停显示注释 在AS中配置 如果你想从网上查看注释,到这一步就操作完成. 下面说明让软件使用本地注释: 使用本地注释 以Windows为例: 找到下面文件 C:\Use ...

  3. 如何扫描二维码下载APK

    将apk文件放到网站上,即用户可以通过www.xxx.com.cn/abc.apk直接下载 再www.xxx.com.cn/abc.apk这个字符串做成二维码就可以了. 问题: 直接放到网站后,输入下 ...

  4. css3 进度条

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>1 ...

  5. github的一些指令

  6. Word-wrap&Text-overflow

  7. picurl

    from lxml import etreeimport requestsdef getHtml(html): novelcontent = requests.get(html).content re ...

  8. DataTable与List互换

    public static class List2DataTable { #region "Convert Generic List to DataTable" /// <s ...

  9. Restful风格API接口开发springMVC篇

    Restful风格的API是一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机 ...

  10. jQuery in action 3rd - Operating on a jQuery collection

    1.创建新 DOM 元素 $('<div>Hello</div>'); $('<img>', { src: 'images/little.bear.png', al ...