頁面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeigh

2024-07-11 08:27:08

字體：大中小

來源：轉載

供稿：網友

1.top

此屬性僅僅在對象的定位(position)屬性被設置時可用。否則，此屬性設置會被忽略。

復制代碼

代碼如下:
<div style="background-color:red; position:absolute; width:100px; height:100px;">
<p style="background-color:silver; position:absolute; top:-5px;">測試top</p>
</div>

上面是一個段落P包含在一個DIV內，可以看到P的top設置為-5px后，它的上邊距超過了容器DIV的上邊距，超過的這段距離就是設置的5px。

需要注意的是，DIV和P這一對包含元素，都需要設置position為absolute才能得到想要的結果，假如父元素不設置，則子元素的參照將是更上層定義過position的元素，直到整個文檔；

2.posTop

posTop的數值其實和top是一樣的，但區別在于，top固定了元素單位為px，而posTop只是一個數值,一般使用posTop來進行運算。

3.scrollTop

復制代碼

代碼如下:
<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">
<p style="background-color:red;" mce_style="background-color:red;">
這里是文本
</p>
</div>
<script type="text/javascript"></script>

這一段文本在這個100*100的DIV內無法完全顯示，所以設置了overflow為auto，它會出現一個上下方向的滑動框，假如沒有設置 id.scrollTop屬性的話，默認情況下滑塊位置在頂端。而設置了scrollTop值為12后，滑塊的位置改變了，默認顯示是卷過了12個象素的文本。如果設置overflow為hidden，則將會無法顯示頂部12個象素的文本。

注意設置方式是id.scrollTop，而不是id.style.scrollTop。

4.offsetTop

如果元素 A 是 HTML 的 body 元素，其 display 屬性計算值是 none，或者不具有 CSS 布局盒子，則返回 0，并停止本算法。

如果元素 A 的 offsetParent 是 null 或者是 HTML 的 body 元素，以 CSS 像素為單位返回元素 A 上邊框距畫布原點的垂直距離，并停止本算法。

以 CSS 像素為單位返回元素 A 上邊框距其 offsetParent 上邊框的距離。

5. scrollHeight 與 offsetHeight與clientHeight

對于document.body

clientHeight
大家對 clientHeight 都沒有什么異議，都認為是內容可視區域的高度，也就是說頁面瀏覽器中可以看到內容的這個區域的高度，一般是最后一個工具條以下到狀態欄以上的這個區域，與頁面內容無關。

offsetHeight
IE、Opera 認為 offsetHeight = clientHeight + 滾動條 + 邊框。

上一篇：css float 解析學習

下一篇：創建超鏈接及css 樣式設置