top/posTop/scrollHeight/offsetHeight/scrollTop的区别【2012/08/04】

最新推荐文章于 2022-11-09 11:03:42 发布

weixin_30342827

最新推荐文章于 2022-11-09 11:03:42 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhengyingyan/p/3627218.html

本文深入探讨CSS中top、posTop、offsetHeight、scrollHeight及scrollTop等属性的使用技巧与区别，通过实例代码演示各属性如何影响元素定位与尺寸。

1、top：（在设置了定位（position）后该属性才生效。）从下面的代码和效果可以看到，div和p元素都设置了position后，p相对于其父元素div有10px的高度。

2、posTop：posTop其实跟top是相同的，区别在于top固定了元素单位为px，而posTop只是一个数值。（FF没有该属性）

<div style="background:pink;width:100px;height:100px;position:absolute;margin:20px">

　　<p id="p1" style="background:green;width:50px;height:50px;position:absolute;"></p>
</div>

<script type="text/javascript">
　　p1.style.posTop = 20;
　　alert("top:" + p1.style.top + ";" + "posTop:" + p1.style.posTop);
</sctipt>

3、offsetHeight scrollHeight : offsetHeight是自身元素的高度，scrollHeight是自身高度+被隐藏的高度。

<div style="background:pink;width:350px;height:200px;position:absolute;margin:20px;overflow:auto" id="content">
<p style="height:500px;white-space:pre;">
最怕空气突然安静
最怕朋友突然的关心
最怕回忆突然翻滚绞痛着不平息
最怕突然听到你的消息

想念如果会有声音
不愿那是悲伤的哭泣
事到如今终于让自己属于我自己
只剩眼泪还骗不过自己

突然好想你你会在哪里
过得快乐或委屈
突然好想你突然锋利的回忆
突然模糊的眼睛

我们像一首最美丽的歌曲
变成两部悲伤的电影
为什么你带我走过最难忘的旅行
然后留下最痛的纪念品
</p>
</div>
<script>alert("offsetHeight:" + content.offsetHeight + " ; " + "scrlloHeight:" + content.scrollHeight);</script>

4、scrollTop:由于文本大于盒子，无法完全显示，在设置了overflow:auto后，出现滚动条，默认情况下滚动条位置在顶端（如上图），设置了id.scrollTop后，其位置改变。

<script>content.scrollTop = 100;</script>

转载于:https://www.cnblogs.com/zhengyingyan/p/3627218.html