top、clientTop、scrollTop、offsetTop的区别

scroll([data],fn):当用户滚动指定元素时,发生scroll事件;

scroll事件适用于所有可以滚动的元素和window对象,eg.:$(window).scroll(function(){})。

scrollTop([val]):获取/设置匹配元素相对滚动条顶部的偏移。

offset():获取匹配元素的相对偏移,返回的对象包含两个整形属性:top,left,以像素计。

时间: 2024-10-26 10:54:28

top、clientTop、scrollTop、offsetTop的区别的相关文章

javascript中top,clientTop,scrollTop,offsetTop用法

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

scrollTop和offsetTop的区别,scrollTopLeft和offsetLeft的区别

scrollTop和offsetTop的区别:scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10,这个属性的值是可读写的,且不需要设置positionoffsetTop则是元素的上边框与父元素的上边框的绝对距离. scrollLeft:设置或获取对象最左端和对象内容的最左端之间的距离,这个属性的值是可读写的offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置. 调用scrollLe

js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】

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

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

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

javascript中scrollTop和offsetTop的区别

scrollTop是指某个可滚动区块向下滚动的距离,offsetTop则是元素的上边框与父元素的上边框的绝对距离. 1.offsetTop   : 当前对象到其上级层顶部的距离. 不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft    : 当前对象到其上级层左边的距离. 不能对其进行赋值.设置对象到页面左部的距离请用style.left属性. 3.offsetWidth   : 与style.width属性的区别在于:如对象的宽度设定值为百分比宽度

offsetTop/offsetHeight scrollTop/scrollHeight 的区别

offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offsetTop   obj距离上方或上层控件的位置,整型,单位像素. obj.offsetHeight   obj自身的高度,整型,单位像素. offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是: 一.offsetTop 返回的是数字,而 st

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

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

终于搞懂scrollTop, offsetTop, scrollLeft, offsetLeft......

补充说明 上面的图已经标记的已经很明显了,我再稍微补充几点: offsetTop, offsetLeft:只读属性.要确定的这两个属性的值,首先得确定元素的offsetParent.offsetParent指的是距该元素最近的position不为static的祖先元素,如果没有则指向body元素.确定了offsetParent,offsetLeft指的是元素左侧偏移offsetParent的距离,同理offsetTop指的是上侧偏移的距离. offsetHeight, offsetWidth:只