使用 innerHTML 來為畫面上某個區塊添加內容值是很常見的技巧，而有時我們在執行 innerHTML 之後還需要重新取得這個區塊的高度與寬度，一般而言我們會使用 offsetHeigth 與 offsetWidth 這兩個屬性。
程式一：
<html>
<head>
<script>
function inner() {
document.getElementById('testDiv').innerHTML =
document.getElementById('words').value;
}
function alertOffsetHeight() {
alert(document.getElementById('testDiv').offsetHeight);
}
</script>
</head>
<body>
<div id="testDiv" style="height:100;width:100;background:yellow;">
</div><p>
<input type="text" id="words">
<input type="button" value="add words" onclick="inner()"><BR>
<input type="button" value="get offset height"
onclick="alertOffsetHeight()">
</body>
</html>
以下為程式一執行的結果：
在上圖中，若我們在輸入框裏打入一長串的字，然後按下「add words」將這些字用 innerHTML 寫入黃色區塊時會發生什麼事呢？
以下是分別在 IE 與 Firefox上執行的結果
 |
 |
| 上圖為在 IE 上的執行結果 | 上圖為在 Firefox 上執行的結果 |
在 IE 上，黃色區塊配合我們塞入的內容值而變長了，但是在 Firefox 中，變長的只有我們加進去的文字，黃色區塊還是維持原來的大小，接下來我們按下「get offset height」鈕看看，結果在 IE 上得到的值是黃色區塊變長後的高度，但在 Firefox 上取得的仍是黃色區堆原先的高度。
為什麼會這樣呢？老實說我並不知道…我只知道如果無法正確取得區塊變長或變寬後的值，那麼很多效果就會做不出來，於是在查了一堆有關 HTMLElement 物件與 CSS 屬性值後，我找到了一個 CSS 的屬性-值似乎能解決這個問題，這個 CSS 屬性-值就是：display : table-cell。
馬上來動手試試看吧~~
我們將「程式一」裏的 function inner() 改成
function inner() {
document.getElementById('testDiv').style.display = "table-cell";
document.getElementById('testDiv').innerHTML =
document.getElementById('words').value;
}
然後在 Firefox 上執行看看，得到下圖的結果
畫面呈現的結果變得跟 IE 一樣了，那麼趕快按下「get offset height」看看結果，果然取到的值是黃色區塊變長之後的值。
Firefox 執行正確之後當然還要回頭再試試看 IE 啦，不過讓人很沮喪的，IE 竟然會丟出錯誤訊息，看來 IE 並不支援 display : table-cell 這樣的 CSS 屬性-值，於是我們只好再改造一下 inner() 這個方法了：
function inner() {
try {
document.getElementById('testDiv').style.display = "table-cell";
} catch(e) {
}
document.getElementById('testDiv').innerHTML =
document.getElementById('words').value;
}
我們把設定 display = "table-cell" 的程式碼用 try-catch 包起來，這樣在 IE 和 Firefox 上就都可以執行了。
留言列表
WebService (1)