Impossible de calculer la largeur des éléments

J'essaie d'obtenir la largeur des objets DOM:Impossible de calculer la largeur des éléments

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

En obtenir des résultats:

Chrome: 800
Opera: 708
FF: 783
IE: 714

Mais si le voir dans firebug, libellule et autres débogueurs, je vois correct 908px. Je ne sais pas où porblem. Je cours ce plaisir après domloaded.

est ici HTML et CSS du bloc:

<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>

Et cela intéressant. Cette fonction fonctionnera plus tard correctement, seulement à la première exécution, pour le premier calcul.

Source

2010-06-02 Kein

Puisque vous utilisez jQuery, pourquoi ne pas utiliser 'this.largeur() '? – kennytm

@KennyTM Même résultat. Il obtient pour moi des idées que ce problème peut être en html et en chargement CSS. Mais je ne sais pas où est le problème ... Et si le problème dans le chargement de css, le résultat doit être le même – Kein

j'ai réussi à obtenir ce travail (avec jQuery): S'il vous plaît laissez-moi savoir si je mal compris la question

<!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>

Source

2010-06-02 10:38:37

Je teste dans ma page, et lier resizeArea() au bouton, et cela fonctionne correctement, mais quand j'appelle resizeArea () dans document.ready() ce n'est pas de travail (je ne sais pas ce qui ne peut pas charger avant dom: chargé .. – Kein

Oui, vous exemple fonctionne correctement) Mae être j'ai un bug dans mon code ... – Kein

Pouvez-vous accepter cette répondre si cela a fonctionné s'il vous plaît? :) –

Impossible de calculer la largeur des éléments

Répondre

Questions connexes