|
Browser 的 JavaScript - clientWidth 及 scrollWidth
|
Browser 的 JavaScript - clientWidth 及 scrollWidth
分類標籤: 程式設計
|
August 16, 2012 01:14AM 發表文章數: 90 |
我們來看下面這段程式片段(修改自TQC Javascript 203題)
<html>
<head>
<title>圖片捲動控制</title>
</head>
<body id=bd style="margin:0px" >
<div id="dv" onMouseDown="stop()" onMouseUp="cont()" onDragEnd="contD()" style="white-space:nowrap">
<script>
var di, tout,posD,posU;
for (i=1;i<11;i++) {
document.write("<img style='border-style:ridge;border-width:5px;border-color<img class="mod_smileys_img" src="http://mepopedia.com/forum/mods/smileys/images/smilie4.gif" alt="yawning smiley" title="yawning smiley"/>live' src=img-"+i+".jpg height=120>")
}
document.write("</div>")
(1)請注意，div 有一個 屬性：style="white-space:nowrap"
也就是div的內容如果超過視窗(可視)寬度，他會在同一行繼續排下去，實際寬度會超過視窗，不會跳行
(2) 這時，有趣的一些 property來了(在我的19吋螢幕上測試)，下面這些屬性以 alert 輸出：
(2-1)
在IE9.0.8112.16421中
document.body.clientWidth ( 或 document.getElementById('bd').clientWidth ) 的結果為 1419
document.body.scrollWidth ( 或 document.getElementById('bd').scrollWidth ) 的結果為 1700
(2-2)
在 FireFox 14.0.1中
(2-2-1)
初次執行
document.body.clientWidth ( 或 document.getElementById('bd').clientWidth ) 的結果為 1440
document.body.scrollWidth ( 或 document.getElementById('bd').scrollWidth ) 的結果為 1440
(2-2-2)
但在上面執行後，再按重新整理
document.body.clientWidth ( 或 document.getElementById('bd').clientWidth ) 的結果為 1440
document.body.scrollWidth ( 或 document.getElementById('bd').scrollWidth ) 的結果為 1700
只是按重新整理，會差這麼多，這算是 firefox 的 bug 嗎?
(1)請注意，div 有一個 屬性：style="white-space:nowrap"
也就是div的內容如果超過視窗(可視)寬度，他會在同一行繼續排下去，實際寬度會超過視窗，不會跳行
(2) 這時，有趣的一些 property來了(在我的19吋螢幕上測試)，下面這些屬性以 alert 輸出：
(2-1)
在IE9.0.8112.16421中
document.body.clientWidth ( 或 document.getElementById('bd').clientWidth ) 的結果為 1419
document.body.scrollWidth ( 或 document.getElementById('bd').scrollWidth ) 的結果為 1700
(2-2)
在 FireFox 14.0.1中
(2-2-1)
初次執行
document.body.clientWidth ( 或 document.getElementById('bd').clientWidth ) 的結果為 1440
document.body.scrollWidth ( 或 document.getElementById('bd').scrollWidth ) 的結果為 1440
(2-2-2)
但在上面執行後，再按重新整理
document.body.clientWidth ( 或 document.getElementById('bd').clientWidth ) 的結果為 1440
document.body.scrollWidth ( 或 document.getElementById('bd').scrollWidth ) 的結果為 1700
只是按重新整理，會差這麼多，這算是 firefox 的 bug 嗎?
MEPO forum
is powered by Phorum.