码迷,mamicode.com
首页 > 其他好文 > 详细

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

时间:2014-07-06 21:42:04      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   width   os   html   

      先搞offsetTop,最难懂的就是它了

  官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位。这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离,有点绕口是不是?别急,咱慢慢剥开它...首先一定要明白offsetTop是一个相对值,那它到底是相对于谁的值呢,现在的女明星不都流行找干爹嘛,offsetTop也给自己找了一个,别人的要求是要有钱有权,而它的要求是要有position(只能是relative和absolute,fixed在IE和Opera中无效),并且是父级中离它最近的那一个,挺符合就近原则滴!而offsetY则是一个鼠标事件的值,它是相对于你所点击的那个元素的,它的最小值是0,最大值是所点击元素的高度。在现在大家明白了吧,如果还木有就看这个实例:http://www.quirksmode.org/dom/tests/offset.html

scrollHeight, scrollWidth

返回元素的完整的高度和宽度,以像素为单位。当一个元素拥有滚动条时(比如由于 CSS 的 overflow 属性),这些属性和 offsetHeight 与 offsetWidth 不同,offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。

  当你把滚动条滚到底部的时候,scrollHeight = scrollTop + clientHeight;当没有滚动条时scrollHeight = clientHeight,IE则是等于内容的高度;

scrollTop, scrollLeft

  设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight,布布扣,bubuko.com

搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

标签:style   http   color   width   os   html   

原文地址:http://www.cnblogs.com/kuangliu/p/3824641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!