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

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>