div의 높이를 동적으로 변경하는 방법

div의 높이를 어떻게 동적으로 변경합니까? div의 높이를 동적으로 변경하는 방법

왜이 작동하지 않습니다 : 나는 희망

이

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

더 아래이 라인으로 제공되는 priceBar의 DIV를 변경하는 데 사용할 수 있습니다.

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

나는 인쇄 할 때부터 볼 수있는 페이지로 보내지는 높이에 대해 올바른 값을 얻고 있습니다. 그러나 나는 priceBar div의 높이를 변경하기 위해이 값을 사용할 수 없습니다.

나는 "높이"를 보내기 위해 혜성을 사용하고 있으므로 새로운 "높이"를 요구하는 명시적인 행동은 없다.

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

출처

2009-08-29 Ankur

누구나 jQuery를 사용하면 이상적 일 수 있습니다. – Ankur

. XHR을 즉시 호출하기를 원하기 때문에 XHR을 다루는 것이 때로는 까다로운 일이지만 때로는 페이지가로드되기 전에 콜백이 발생하는 경우가 있습니다. 처음에는 XHR 함수를 window.onload 함수 (또는 Prototype DOM Ready에 해당하는 함수)에 넣습니다. 문제가 해결되면 먼저 XHR을 시도하고 DOM이 준비되었는지 여부를 테스트 할 수 있습니다. 즉, DOM을 준비했는지, 설정했는지, 설정하지 않았 으면 기능을 연기 할 수 있는지 테스트 할 수 있습니다.

출처

2009-08-29 16:52:15 mwilcox

대신을 시도에도 깔끔한

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

출처

2009-08-29 16:46:23

또는를 : 당신은 DOM이 준비되기 전에 노드의 높이를 설정하려고

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

출처

2009-08-29 16:49:02

div의 높이를 동적으로 변경하는 방법

답변

관련 문제