Comment modifier dynamiquement la hauteur d'un div

Comment modifier dynamiquement la hauteur d'un div.Comment modifier dynamiquement la hauteur d'un div

Pourquoi ça marche pas:

var priceBarElement = $("priceBar"); 
priceBarElement.style.height = request.responseText+"px";

que j'espère utiliser pour changer le priceBar div qui est donnée par cette ligne plus bas.

<div id="priceBar" style="width:28px;margin-top:20px;background:#F00"></div>

Je reçois une valeur correcte pour la hauteur envoyée à la page, que je peux voir depuis que je l'ai imprimée. Cependant, je ne peux pas sembler utiliser la valeur pour changer la hauteur du prixBar div. J'utilise les comètes pour envoyer les "hauteurs", donc il n'y a aucune action explicite qui demande une nouvelle "hauteur".

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<%@page import="com.astheymove.util.ApplicationPathUtils"%><html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Comet Weather</title> 
    <script src="javascript/prototype.js" type="text/javascript"></script> 
    <script src="javascript/scriptaculous.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     function go(){ 
      var url = '<%= ApplicationPathUtils.getApplicationPath(pageContext) + "/prices" %>'; 
      var request = new XMLHttpRequest(); 
      request.open("GET", url, true); 
      request.setRequestHeader("Content-Type","application/x-javascript;"); 
      request.onreadystatechange = function() { 
       if (request.readyState == 4) { 
        if (request.status == 200){ 
         if (request.responseText) { 
          var forecastsElement = $("forecasts"); 
          forecastsElement.innerHTML = request.responseText; 
          var priceBarElement = $("priceBar"); 
          priceBarElement.style.height = request.responseText+"px"; 
          // highlight it 
          //new Effect.Highlight(forecastsElement, { startcolor: '#C0C0C0', 
          // endcolor: '#ffffff' }); 
         } 
        } 
        // not to highlight too often 
        //setTimeout("go();",1000); 
        go();         
       } 
      }; 
      request.send(null); 
     } 
    </script> 
</head> 
<body> 
    <h1>Rapid Fire Weather</h1> 
    <input type="button" onclick="go()" value="Go!"></input> 
    <div id="forecasts" style="padding:10px; border:1px solid #ccc; background:#ffffff;"> 
     Weather forecasts! 
    </div> 
    <div id="pricesPanel" style="height:100px;"> 
       <div id="priceBar" style="width:28px;margin-top:20px;background:#F00"></div> 
    </div> 
</body> 
</html>

Source

2009-08-29 Ankur

Si quelqu'un peut m'aider avec jQuery, ce serait idéal. – Ankur

Vous essayez de régler la hauteur du nœud avant que le DOM est prêt. Il est parfois difficile de traiter un XHR, parce que vous voulez appeler ce XHR tout de suite, mais il arrive que le rappel arrive avant que la page ne soit chargée. Initialement, placez la fonction XHR dans une fonction window.onload (ou l'équivalent Prototype DOM Ready). Si cela résout le problème, vous pouvez essayer de faire le XHR en premier et tester si le DOM est prêt ou pas - si c'est le cas, réglez-le, sinon, différer la fonction.

Source

2009-08-29 16:52:15 mwilcox

Essayez ceci:

var priceBarElement = $("#priceBar")[0]; 
priceBarElement.style.height = request.responseText+"px";

Source

2009-08-29 16:46:23

Ou encore plus net:

$('priceBar').setStyle({height: request.responseText+"px"});

Source

2009-08-29 16:49:02

Comment modifier dynamiquement la hauteur d'un div

Répondre

Questions connexes