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>