offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间
来源:互联网 发布:周易起名大师软件 编辑:程序博客网 时间:2024/05/21 07:22
offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间。
今天花点功夫,彻底把他们搞清楚了。
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
scrollTop 是“卷”起来的高度值,示例:
<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。
scrollHeight 与 offsetHeight
offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值???)。
<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red; height:250px; ">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎
</p>
</div>
<script>
alert(document.getElementById("container").offsetHeight);
alert(document.getElementById("container").scrollHeight);
</script>
将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为 250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为 100+150=250。
转:http://hi.baidu.com/lampers/item/1605adc13daa00350931c6fc
附:http://www.cnblogs.com/wang726zq/archive/2012/05/10/2494256.html
我认为我们想要两个东西:
- 一是 scrollWidth(scrollHeight),虽然它用处不大,但应该比 offsetWidth(offsetHeight)有用得多。它表示的是文档区的宽度(高度),比如一个网页,特别是门户网站,拖很长,就要把没有显示出来的内容都计算进去。
- 二是视口 viewport,就是 clientWidth,就是窗口中可显示内容的那块区域,就是我们常常看到页面上飞行广告,飞来飞去,碰到边边要反弹的那一块。
- offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间
- clientHeight/scrollHeight/offsetHeight/offsetParent/offsetTop/offsetHeight/scrollTop
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeigh
- offsetTop,offsetHeight,scrollHeight,scrollTop的区别
- offsetTop.offsetLeft,offsetWidth,offsetHeight,offsetParent,scrollTop,scrollLeft,scrollWidth,scrollHeight区别
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- offsetLeft,offsetTop,offsetHeight,offsetWidth,scrollTop,scrollLeft,scrollHeight,scrollWidth
- 终于清晰啦!offsetHeight、scrollHeight、clientHeight和offsetTop、scrollTop、clientTop
- scrollTop、offsetHeight和offsetTop等属性用法详解
- scrollHeight,scrollLeft,scrollTop,scrollWidth,offsetHeight,offsetLeft,offsetTop,event.clientX,event.clientY
- scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrol
- top、postop、scrolltop、scrollHeight、offsetHeight
- top、postop、scrolltop、scrollHeight、offsetHeight
- clientTop、scrollTop、offsetTop、scrollHeight、clientHeight、offsetParent。。。
- 搞清top、postop、scrolltop、scrollHeight、offsetHeight
- clientHeight、offsetHeight、scrollHeight、scrollTop的区别
- 【算法导论】第十一课 扩充的数据结构、动态有序统计和区间树
- OOM问题 解决原则
- C Primer Plus 第九章 学习总结……2015.4.26
- Java中关于字符编码的一些思考
- 在MacBook安装maven
- offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间
- 字符串的运算符重载
- Oracle Where查询语句与排序语句
- Linux墙上时间
- Rebuilding Roads(POJ1947)树状dp
- jquery中获取id值方法
- 为什么有人会借钱不还?为什么朋友之间不能谈钱?
- 重读Windows核心编程--CreateProcess
- Java实验三