2008-12-30 5 views
3

Je suis en train de mettre à jour l'attribut src d'un tag <img> dans javascript. Après que j'ai fait ceci, je dois obtenir la nouvelle taille de son parent <div> de sorte que je puisse mettre à jour la taille d'autres éléments sur la page. Si je récupère la propriété offsetHeight du parent directement après la mise à jour src de l'image, cependant, j'obtiens la hauteur avant la modification a été apportée. Existe-t-il un moyen de forcer le navigateur à afficher la page mise à jour afin que je puisse obtenir la nouvelle hauteur?DHTML: Obtention de la taille d'élément mise à jour

Repro:

<html> 
<head> 
<script type="text/javascript"> 
    function changeImage(){ 
     document.getElementById("image").src = "b.jpg"; 
     // here I need to re-render the page 
     alert(document.getElementById("parent").offsetHeight); 
     //^alerts the height of a.jpg, not b.jpg (unless this is the second click) 
    } 
</script> 
</head> 

<body onclick="changeImage()"> 

<div id="parent"> 
    <img id="image" src="a.jpg" /> 
</div> 

</body> 
</html> 

Répondre

2

Vous devrez peut-être attendre l'image pour terminer le chargement avant que la hauteur est disponible. Dans votre exemple de code, la définition de l'attribut "src" chargera l'image (b.jpg) de manière asynchrone, vous souhaiterez peut-être attacher un "onload" à cet élément pour être averti lorsque le chargement et le rendu seront terminés.

3

Si vous n'avez pas besoin de la nouvelle hauteur tout de suite, utilisez la solution de Marc. Cependant, si vous avez besoin de la hauteur juste lorsque l'utilisateur clique, vous devrez précharger b.jpg. Ensuite, je ne sais pas si la hauteur sera correcte dans la même fonction, mais je suppose que setTimeout ('alert (document.getElementById ("parent"). OffsetHeight);', 1); alerterait la hauteur dans une milliseconde.

Questions connexes