javascript 之clientHeight、scrollHeight、offsetHeight

三者均用于获取一个Dom节点的高度,不过他们的含义并不相同。

clientHeight :

MDN对该属性的描述如下:

The Element.clientHeight read-only property returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

  从描述可以知道,它是一个只读属性。表示一个Dom节点的内部(inner)高度,包括内填充,但不包括水平滚动条、边框和外边距。

offsetHeight:

MDN对该属性的描述如下:

The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, in pixels, as an integer.

Typically, an element‘s offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

  包括内填充、边框和水平滚动条,不包括外边距。

scrollHeight:

MDN对该属性的描述如下:

The Element.scrollHeight read-only attribute is a measurement of the height of an element‘s content, including content not visible on the screen due to overflow. ThescrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.

  同样它也是一个只读属性。表示一个Dom节点的内容(content)高度,包括因溢出而不可见的内容,同样包括内填充,但不包括边框和外边距。

时间: 2024-12-22 12:27:46

javascript 之clientHeight、scrollHeight、offsetHeight的相关文章

clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案

clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三个属性: clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内

height clientHeight scrollHeight offsetHeight的大致区别

这主要是针对火狐浏览器来讲的: height:就是div的高度: clientHeight:一般情况下和height是一样的,如果div有滚动条,那么clientHeight = height - 滚动条的高度: var w= document.documentElement.clientWidth || document.body.clientWidth; var h= document.documentElement.clientHeight || document.body.clientH

js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?

1.clientHeight:表示的是可视区域的高度,不包含border和滚动条: 2.offsetHeight:表示的是可视区域的高度,包含了border和滚动条 3.scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分: 4.clientTop:表示边框border的厚度,在未指定的情况下一般为0 5.srcollTop:滚动后被隐藏的高度,获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度 分析:    clien

clientHeight , scrollHeight , offsetHeight之间的区别

clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距 详情:https://www.cnblogs.com/nanshanlaoyao/p/5964730.html 原文地址:https://www.cnblogs.com/hu

clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop

clientHeight:表示的是可视区域的高度,不包含border和滚动条 offsetHeight:表示可视区域的高度,包含了border和滚动条 scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分. clientTop:表示上边框border的厚度 offsetTop:子元素的外边框到offsetParent内边框的距离 scrollTop:滚动后被隐藏的高度 offsetParent:距离元素最近的一个具有定位的祖宗元素 clientX: 相对文档的水平坐标 cl

JS中float对scrollHeight、clientHeight、offsetHeight的影响

背景:在项目中使用百度地图API javascript库 InfoBox时,发现代码:  /**          * 得到infobox的高度跟宽度          * @return none          */         _getInfoBoxSize: function(){          this._boxWidth = parseInt(this._div.offsetWidth,10);          this._boxHeight = parseInt(thi

详解clientHeight、offsetHeight、scrollHeight

关于clientHeight.offsetHeight.scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height 返回当前屏幕高度(分辨率值) window.document.body.offsetHeight; 返回当前网页高度 window.docume

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

1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. 当  box-sizing:border-box时,高度包含了内容框.内边距和边框. 2.clientHeight Element.clientHeight只读属性是没有的CSS或内联布局框元素为零,否则它的像素单元内的高度,但不包括填充水平滚动条的高度,边界或边缘. // 包含元素的conten

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别.通过阅读它们的文档总结出规律如下:clientHeight和offsetHeight属性和元素的滚动.位置没有关系它代表元素的高度,其中:clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属

clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

clientHeight和offsetHeight属性和元素的滚动.位置没有关系,它代表元素的高度,其中: clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度(对于inline的元素这个属性一直是0,单位px,只读元素) offsetHeight:包括padding.border.水平滚动条,但不包括margin的元素的高度(对于inline的元素这个属性一直是0,单位px,只读元素) scrollHeight:包括当前不可见部分的元素的高度