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

<div id="drag" class="drag">drag me</div> <script type="text/javascript"> window.onload = function(e) { e = e || window.event; var drag = O('drag'); console.log(drag.offsetWidth); } function O(id) { return d…

clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括padding.border.水平滚动条,但不包括margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素 当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时: scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样…

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别.通过阅读它们的文档总结出规律如下: clientHeight: 元素可视区域的高度,滚动条.border.margin不算在内,padding算在内 clientHeight = topPadding + bottomPadding + height - 水平滚动条高度…

先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素   ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,…

w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part one:offsetParent作为一个元素属性并不是每一个元素都是值得拥有的,对于符合以下情况的元素是没有offsetParent这个属性的: ① 该元素没有css布局的盒子模型(我觉得这句话很难理解,有见识的人指教): ② 该元素是根元素(关于这一点的理解在后续会解释,其实原因就是offsetPa…

先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素   ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,…

1.offsetTop: obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置. 2.clientTop: 这个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3.scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (即网页被卷去的高) 如果元素是可以滚动的,可以通过这俩个属性得到元素在垂直方向上滚动了多远,单位是象素. 对于不可以滚动的元素,这些值总是0.…

scrollHeight:获取对象可滚动的高度. scrollWidth:获取对象可滚动的宽度. scrollTop:获取对象最顶端与对象可见区域最顶端的距离. scrollLeft:获取对象左边界与对象可见区域左边界的距离. offsetHeight:获取对象在页面中的高度(height + padding + border). offsetWidth:获取对象在页面中的宽度(width + padding + border). offsetTop:获取对象最顶端相对于页面最顶端的距离(以bo…

scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到视口可见内容(的顶部)的距离的度量.当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0. scrollTop 可以被设置为任何整数值,同时注意: 如果一个元素不能被滚动(例如,它没有溢出,或者这个元素有一个"non-scrollable"属性), scrollT…

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后,…

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

1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略 2.posTop posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而posTop只是一个数值,一般使用posTop来进行运算. 3.scrollTop 设置获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 注意设置方式是id.scrollTop,而不是id.style.scrollTop 4.offsetTop offsetTop获取对象相对于版面或由offset…

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

想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更好的建议,请大家评论,一同探讨, 好了废话不多说,下面开始干活了! 首先,说一下我想实现的基本功能: 此方法需要有2个基本形参,,一个是我要监测的标签a,另一个是我要监测标签相对于哪个标签b做的距离检测. 当a和b的距离达到一定范围的时候,让网页局部发生一些变化效果,这是我们的预期. 以下是我的方法…

offsetLeft 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算 offsetTop 获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算 offsetWidth 获取盒子的 宽…

当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么多单词,而且长得那么像,是不是懵X了! 第一次看到这图,说实话有点被吓到... ============================分割线====================================== offsetParent:该属性返回一个对象的引用,这个对象是距离调用offse…

当要做一些与位置相关的插件或效果的时候,像top.clientTop.scrollTop.offsetTop.scrollHeight.clientHeight.offsetParent...看到这么多单词,而且长得那么像,是不是懵X了! 第一次看到这图,说实话有点被吓到... ============================分割线====================================== offsetParent:该属性返回一个对象的引用,这个对象是距离调用offse…

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

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

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

[转贴]花点时间搞清top.clientTop.scrollTop.offsetTop   scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 o…

scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相…

offsetParent:该属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),已进行过CSS定位的容器元素. 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为body元素的引用. 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null. top:该属性一般对用过css定位的元素有效(position为“static”时为a…

之前在修改IE6下的一个显示bug时,查到过这些,贴这备忘,后面给出了详细说明,以前的版本,没仔细的说明,特希望大家也收藏下.   网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight  (包括边线的宽);网页正文全文宽: document.bod…

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

这里是javascript中制作滚动代码的常用属性 页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: document.body.scrollWidth;网页正文全文高: document.body.scrol…

好好看看下面那张图,基本上就没啥问题了! scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的…

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:…

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