Question

如何动态更改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的高度。

我使用Comets发送“高度”，因此没有明确的动作要求新的“高度”。

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

Answer 1

请改为尝试：

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

Answer 2

您正在尝试在DOM准备好之前设置节点的高度。处理XHR时有时会很棘手，因为你想立即调用XHR，但有时候它会在页面加载之前发生回调。最初，将XHR函数放在window.onload函数（或Prototype DOM Ready等效函数）中。如果这样可以解决问题，你可以先尝试做XHR，然后测试DOM是否准备就绪 - 如果没有，则设置它，如果没有，则推迟该功能。

Answer 3

甚至更整洁：

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

如何动态更改div的高度

3 个答案: