方法一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁 | 八頁
操控器一頁 | 二頁 | 成員表
| clientHeight | clientLeft | clientTop | clientWidth |
| offsetHeight | offsetLeft | offsetParent | offsetTop |
| offsetWidth | scrollHeight | scrollLeft | scrollTop |
| scrollWidth |
元素內層展現窗的高，單位是像素（pixel）。唯讀。
元素內層展現窗的寬，單位是像素。唯讀。
- 程式用法：
<div id='star'
style='border:solid red;
border-width:2px 5px 3px 4px'>
<span id='jolin' class='歌星'>
蔡依林</span><br />
<span id='wu' class='笑匠'>
吳宗憲</span>
</div>
<br />
<script type='text/javascript'>
var o=document.getElementById('star');
document.write( o.clientHeight
+' / '+ o.clientWidth );
</script> - 執行結果：蔡依林
吳宗憲
67 / 917
- 不同瀏覽器的輸出結果有不同。
元素的左邊線寬度，單位是像素。唯讀。
元素的上邊線寬度，單位是像素。唯讀。
- 程式用法：
<script type='text/javascript'>
var o=document.getElementById('star');
document.write( o.clientTop
+' / '+ o.clientLeft );
</script> - 執行結果：
2 / 4
元素的佈局高；clientHeight 加上 上下邊線寬。唯讀。
元素的佈局寬；clientWidth 加上左右邊線寬。唯讀。文字行（inline）的元素可能會被斷成多行，則其長寬的計算以第一行文字為準。
- 程式用法：
<script type='text/javascript'>
var o=document.getElementById('star');
document.write( o.offsetHeight
+' / '+ o.offsetWidth );
</script> - 執行結果：
72 / 926
- 不同瀏覽器的輸出結果有不同。
元素的左上角相對於父元素左上角的座標，單位是像素。
- 程式用法：
<script type='text/javascript'>
var o=document.getElementById('wu');
document.write( o.offsetLeft
+' / '+ o.offsetTop );
</script> - 執行結果：
345 / 1275
- 不同瀏覽器的輸出結果有不同。
元素計算距離（offset）的父元素物件。用於上述四個特徵的計算。
- 程式用法：
<script type='text/javascript'>
var o=document.getElementById('wu');
document.write( o.offsetParent.nodeName );
</script> - 執行結果：
BODY
元素內容區的高，當文件內容區的高大於展現窗的高（clientHeight）時，包括捲動未顯示的部分。唯讀。
元素內容區的寬，當文件內容區的寬大於展現窗的寬（clientWidth）時，包括捲動未顯示的部分。唯讀。
讀取或設定元素內容區左邊的捲動距離。
讀取或設定元素內容區上邊的捲動距離。
- 程式用法：
<pre id='scl' style=
'height:80px; width:100px;
background:white; color:red;
overflow:auto'>
這是一個測試。
This is a testing of scroll.
這是一個測試。
This is a testing of scroll.
這是一個測試。
This is a testing of scroll.
</pre>
<script type='text/javascript'>
function readWH()
{
var o=document.getElementById('scl');
alert( o.scrollHeight +' / '+ o.scrollWidth );
}
function readLT()
{
var o=document.getElementById('scl');
alert( o.scrollLeft +' / '+ o.scrollTop );
}
function resetScl()
{
var o=document.getElementById('scl');
o.scrollLeft=o.scrollTop=0;
}
</script>
<a href='javascript:readWH()'>點此讀捲動長寬</a><p>
<a href='javascript:readLT()'>點此讀捲動矩離</a><p>
<a href='javascript:resetScl()'>點此重設捲動矩離</a> - 執行結果：
這是一個測試。 This is a testing of scroll. 這是一個測試。 This is a testing of scroll. 這是一個測試。 This is a testing of scroll.
點此讀捲動長寬
