offsetHeight、scrollHeight、clientHeight、height

【日常总结】scrollTop、scrollHeight与clientHeight的重要关系

前言在做一个需求的时候涉及懒加载,百度了一下,发现scrollTop.scrollHeight与clientHeight这三个元素起到了重要作用,以前做过类似demo但是时间过太久忘记了,现在已经完全分不清这个三个属性的区别,现在再重新复习一下一.scrollTop 定义:获取或设置元素的内容向上滚动的像素值特点:1.未设置时默认为0 2.为负值时不做任何响应 3.设置为超出本身最大值时,默认为最大值二.clientHeight 定义:clientHeight = CSS heigh…

scrollTop、scrollHeight与clientHeight

MDN上概念 scrollTop:获取或设置一个元素的内容垂直滚动的像素数. scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. clientHeight:元素内部的高度(单位像素),包含内边距,但不包括水平滚动条.边框和外边距. 只看概念,似懂非懂,还是要自己测试一遍才知道,做个记录,以下为谷歌浏览器测试. css .box { height: 500px; width: 300px; overflow: scroll; color: #fff; } htm…

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…

关于height、offsetheight、clientheight、scrollheight、innerheight、outerheight的区别一览

平时,不管在pc端页面还是移动端页面,因为我们一般很少会设置某个块的的高度,但是呢,我有时候有需要取到这些高度以便于我们方便进行判断和下一步的编写.一般这个时候我都是直接的获取一个块的高度.height(),来解决,但是有的时候我翻翻查查发现还有offsetheight,而这两者之间还是有一些差别的.下面都以高度来说,详细的区别在取某块或某元素高度的时候,这些height.offsetheight.clientheight.scrollheight.innerheight.outerheight…

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

前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offsetTop.scrollTop 概念一直都很模糊,借此写个demo看看. 举例看看 jquery 对象的 height.innerHeight.outerHeight 几个区别: <%@ page language="java" import="java.util.*&quo…

Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop

Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平滚动条.边框和外边距. clientHeight 包含 padding scrollHeight scrollHeight的值在有滚动条的情况下包括滚动条滚动出去的内容,没有滚动条时是和clientHeight相同.包括元素的padding,但不包括元素的border和margin.scrollHeight也…

各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件 function justAtest() { var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getElementB…

height、clientHeight、scrollHeight、offsetHeight区别

转自 http://www.cnblogs.com/yuteng/articles/1894578.html 我们来实现test中的onclick事件 function justAtest() { var test= document.getElementById("test"); var test2=document.getElementById("test2") var test3=document.getE…

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

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的高) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr…

详解clientHeight、offsetHeight、scrollHeight

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

clientHeight、offsetHeight、scrollHeight详解

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的高); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高: d…

三张图看懂 clientheight、offsetheight、scrollheight

clientheight clientheigh: 内容的可视区域,不包含border. clientheight=padding + height - 横向滚动轴高度. The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it’s the inner height of an element in pixels, includ…

clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight

clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1. clientWidth 和 clientHeight 网页中的每个元素都具有 clientWidth 和 clientHeight 属性,表示可视区域的宽高,即元素内容加上padding以后的大小,而不包括border值和滚动条的大小, 如下图所示: 示例代码如下: HTML代码: <div i…

scrollHieght、offsetHeight、clientHeight、width、height

1.scroll滚动(scrollTop.Left.Height.Width) scroll()当用户滚动指定的元素时,会发生 scroll 滚动事件: scrollWidth.scrollHeight属性表示元素对象真实的宽高: scrollTop() 方法设置或返回被选元素的垂直滚动条位置.当滚动条位于最顶部时,位置是 0. scrollHeight-scrollTop=clientHeight;表示垂直滚动条走到底了(前提margin\padding都为0) 2.client 客户端(cl…

offsetheight 和clientheight、scrollheight、scrollTop区别

clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(经过实践取出来的大多是视口大小) scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度) offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距 window.screen.height:屏幕分辨率高document.body.scrollTop:网页被卷去的高 1.clientHeight clientheight=…

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

今天再次遇到了offset***.client***.scroll***的这三类属性的问题,总是混淆,现归纳总结如下: 大体上来说可以这样理解: client***属性(clientWidth.clientHeight): 表示元素可以看到内容的可见区域部分,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关.且它会直接返回属性的数值大小,可直接进行计算.分开说的话也可以这样理解:若元素大小小于父元素,大小包括padding.content部分,不包括border:若元素大小大于父元…

scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解

开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理如下,方便日后查阅: DOM元素对象 clientHeight 返回当前元素在页面上的可视高度(包括padding:不包括border.margin.滚动条高度) 单位px clientWidth 返回当前元素在页面上的可视宽度(包括padding:不包括border.margin.滚动条宽度) 单…

理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和offsetTop 事件源元素相对于父节点的偏移的像素值. 三.offsetWidth和offsetHeight 获取的是元素的宽度,包含border,padding,内容宽度,以及滚动条的宽度,和element.getBoundingClientRect()的值是一致的. 四.clientWidth…

页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; width:100px; height:100px;"> <p style=" position:absolute; top:-5px;">测试top</p> </div> 上面是一个段落P包含在一个DIV内,可以看到P的top设置为-5px后,…

各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

1..position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移,返回.position().left和.position().top,不算上自己的margin-left: jquery的.offset()获取相对于视口左上角的偏移,返回.offset().left和.offset().top, 算上自己的margin-left,,还可以设置.offset({left:,top:});这个很有用…

clientHeight、offsetHeight 区别笔记

一张图说明全部 clientHeight和clientWidth用于描述元素内尺寸,是指元素内容+内边距大小,不包括边框(低版本IE下实际包括).外边距.滚动条部分 offsetHeight和offsetWidth用于描述元素外尺寸,是指元素内容+内边距+边框,不包括外边距和滚动条部分 clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离,也就是左,上边框宽度 offsetTop和offsetLeft表示该元素的左上角(边框外边缘)与已定位的父容器(off…

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

先搞offsetTop,最难懂的就是它了官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离,有点绕口是不是?别急,咱慢慢剥开它...首先一定要明白offsetTop是一个相对值,那它到底是相对于谁的值呢,现在的女明星不都流行找干爹嘛,offsetTop也给自己找了一个,别人的要求是要有钱有权,而它的要求是要有position(只能是relative和…

js的onscroll、scrollTop、scrollHeight及window.scroll等方法

onscroll 解释:当元素的滚动条滚动时触发的事件. onscroll事件貌似任何实体元素都可以绑定,这里的实体元素包括DOM元素.window元素.document元素. 用法即:element.onscroll=function(){}; 需要注意的是,滚动条一定要出现,而且滚动条是属于这元素的,例如: <div id="wrap" style="height:100px;overflow:auto;"> <div id="inn…

innerHeight与clientHeight、innerWidth与clientWidth、scrollLeft与pageXOffset等属性

区分innerHeight与clientHeight.innerWidth与clientWidth.scrollLeft与pageXOffset等属性标签: innerheight clientheight innerwidth clientwidth offsetleft等 window对象: (1)innerHeight属性:窗口中文档显示区域的高度,不包括菜单栏.工具栏等部分.该属性可读可写. IE不支持该属性,IE中body元素的clientHeight属性与该属性相同. (2)inn…

javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

主要介绍了javascript获取和判断浏览器窗口.屏幕.网页的高度.宽度等 scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetPare…

scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义及计算方式附实例说明

一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight offsetWidth 三.可视距离.宽高 clientTop clientLeft clientHeight clientWidth 四.坐标 event.clientX event.clientY event.pageX event.pageY event.offsetX event.offse…

关于Chrome（谷歌浏览器）对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top

对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quir…