js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结

今天再次遇到了offset***、client***、scroll***的这三类属性的问题,总是混淆,现归纳总结如下:

大体上来说可以这样理解:

client***属性(clientWidth、clientHeight):

  表示元素可以看到内容的可见区域部分,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关。且它会直接返回属性的数值大小,可直接进行计算。分开说的话也可以这样理解:若元素大小小于父元素,大小包括padding、content部分,不包括border;若元素大小大于父元素,则表示可以看到的部分的高或宽。

offset***属性(offsetWidth、offsetHeight、offsetTop、offsetLeft):

  对于offsetWidth和offsetHeight,都表示当前对象的宽度/高度。offsetWidth与style.widtht的区别是:若对象的宽度设定值为百分百宽度,无论页面变大或变小,style.width都返回此百分比;而offsetWidth则返回页面中对象的宽度值而不是百分比。

  对于offsetTop和offsetLeft,都表示当前元素对象相对于其定位元素的垂直/水平偏移量。

scroll***属性(scrollTop、scrollLeft、scrollHeight、scrollWidth): 

  scroll是滚动条的意思,也就是scrollWidth、scrollHeight属性代表元素对象真实的宽高,即使有一部分看不到;scrollTop、scrollLeft代表元素对象最顶端/最左端到对象到当前窗口显示的局限内的距顶部/左边距的间隔,也是垂直/水平滚动条滚动了的距离。

  有两个关系式是:

  scrollHeight - scrollTop = clientHeight:当这两个条件成立时,也就代表垂直滚动条走到底了

  scrollWidth - scrollLeft = clientWidth:当这两个条件成立时,也就代表水平滚动条走到底了

以上就是本人对以上属性元素的理解总结,如有错误之处,烦请指出,大家共同进步。

时间: 2024-10-31 13:46:51

js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结的相关文章

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

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

Js中的数据属性和访问器属性

Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性包含四个特性,分别是: configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true enumerable:表示能否通过for-in循环返回属性 writable:表示能否修改属性的值 value:包含该属性的数据值.默

彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight

测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo

js中BOM与DOM的相关知识基础

 [函数的声明及调用] 1.>>>函数声明的格式: function 函数名(参数1,参数2,--){ // 函数体 return 结果; } >>>函数调用的格式: 直接调用:函数名(参数1的值,参数2的值,--); 事件调用:事件名=函数名(); 2.函数声明的几点强调: ① 函数名的声明,必须符合小驼峰法则(首字母小写,之后每个单词首字母大写): ② 参数列表,可以有参数,可以无参数.分别称为有参函数,无参函数: ③ 声明函数时的参数列表,称为"形参列表

关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var node1 = document.querySelector('#father'); var node2 = document.querySelector('#child'); console.log('offsetTop==offsetHeight==scrollTop==scrollHeight==cli

JS数组对象的定义及相关属性和方法

数组: JS中的数组对象跟java中的集合本质上是一样的,它的长度是可变的.元素可以是任意object类型. 定义: new Array(); new Array(size); new Array(element0, element1, ..., elementn); var array = [element0,element1,...,elementn];//定义一个二维数组 var array2w = [ [element0,element1,...,elementn], [element0

JS中 对象数组按某一属性去重 校验是否有重复数据

新任务: 下拉框出去重复数据 //前端对象数组 按某个属性去重 其中jsonArray 是你要去重的对象数组 示例中  按name属性去重 //前端对象数组 按某个属性去重 var obj = {}; jsonArray = jsonArray.reduce(function(item,next){ obj[next.name]?'':obj[next.name] = true&&item.push(next); return item; },[]); for(var i= 0;i<

clientHeight,offsetHeight与scrollHeight的相关知识

在html里,width与height是最常用也是最基础的两个属性,因此,在js里,我们也经常需要操作这两个属性.js关于这两个属性提供了client*,offset*与scroll*,很多同学搞不清楚这三者之间的区别,经常望着这三个属性满脸问号,不知道该用哪个.所以今天就来看一下这三个属相的区别. JUST SHUTUP AND SHOW ME YOUR CODE!! ok,不多说话,看代码. <style> .out{ width:100px; height:100px; backgrou

主流浏览器下下offsetHeight\clientHeight\scrollHeight以及window的innerHeight\outHeight等的关系

1.Firefox32.03 body clientHeight:body.padding+ body.height(css设置或内容撑的,以设置的优先); offsetHeight:body.padding+ body.height(css设置或内容撑的,以设置的优先)+body.border; scrollHeight:body.padding+ body.height(css设置或内容撑的,谁大谁优先); documentElement clientHeight= window.inner