無法計算元素

的寬度我試圖讓DOM的寬度對象：無法計算元素

function resizeArea(){ 
     var width = 0; 
     area.children().each(function(i){ 
      alert(this.offsetWidth); 
      width += this.offsetWidth; 
     }); 
     area.css('width', width); 
    }

在得到結果：

瀏覽器：800
歌劇：708
FF： 783
IE：714

但如果看到它在螢火蟲，蜻蜓和其他調試器，我看到正確的908px。我不知道在哪裏porblem。我在domloaded之後運行這個樂趣。

這裏是塊的HTML和CSS：

<div class="scroll_area" id="scroll"> 
    <div class="area" id="area"> 
     <div class="category"> 
     [..] 
     </div> 
    </div> 
</div> 
<style> 
    #scroll { 
     position:realtive; width: 800px, heght: 400px; 
    } 
    #area { 
     position:absolute; left: 0; top: 0; 
    } 
    #area .category, #area .category .text, #area .category .image{ 
     width: 200px 
    } 
</style>

這有趣。此功能稍後可正常工作，只能在第一次運行時進行第一次計算。

來源

2010-06-02 Kein

由於您使用jQuery的，爲什麼不能用'this.width（） '？ – kennytm 2010-06-02 09:55:51

@KennyTM 同樣的結果。它給我的想法，這個問題可能是在HTML和CSS加載。但我不知道問題出在哪裏... 如果加載CSS的問題，結果必須相同 – Kein 2010-06-02 10:06:26

我設法得到這（使用jQuery）工作： 請讓我知道如果我誤解了這個問題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
    #scroll { 
     position:realtive; width: 800px, heght: 400px; 
    } 
    #area { 
     position:absolute; left: 0; top: 0; 
    } 
    #area div.category { 
     width: 200px; 
     display: block; 
    } 
</style> 
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript" language="Javascript"></script> 
<script type="text/javascript"> 
function resizeArea(){ 
     var width = 0; 
     jQuery("#area").children().each(function(i){ 
      alert(this.offsetWidth); 
      width += this.offsetWidth; 
     }); 
     jQuery("#area").css('width', width); 
    } 
</script> 
</head> 
<body> 
<div class="scroll_area" id="scroll"> 
    <div class="area" id="area"> 
     <div class="category"> 
     [..]FIRST ALERT 
     </div> 
     <div class="category"> 
     [..]SECOND ALERT 
     </div> 
    </div> 
</div> 
<script type="text/javascript">resizeArea();</script> 

<br /><br /><br /><a href="javascript:void(0);" onClick="resizeArea()">Fun Function Again</a> 
</body> 
</html>

來源

2010-06-02 10:38:37

我測試我的頁面，並將resizeArea（）綁定到按鈕，並且它工作正常，但是當我調用resizeArea ）在document.ready（）它不工作（我不知道在dom之前不能加載什麼：加載.. – Kein 2010-06-02 11:06:04

是的，你的例子工作正常）Mae是我有我的代碼中的一些錯誤... – Kein 2010-06-02 11:22:29

你能接受這個回答如果它有效嗎？ :) – 2010-06-02 12:39:12

無法計算元素

回答

相關問題