javascript - 为什么在 for 循环中设置高度的样式不起作用？

Question

当尝试在 for 循环中根据元素值给出高度时不起作用，与背景颜色相同。如果我通过数组接近该项目，它就不起作用。元素数据是一个数字。

code:
function chart(){
var divs = [a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11,a12]
    var a1 = document.getElementById("111").style.backgroundColor = "blue" ;
    var a2 = document.getElementById("112").style.height = "500px";
    var a3 = document.getElementById("113");
    var a4 = document.getElementById("114");
    var a5 = document.getElementById("115");
    var a6 = document.getElementById("116");
    var a7 = document.getElementById("117");
    var a8 = document.getElementById("118");
    var a9 = document.getElementById("119");
    var a10 = document.getElementById("120");
    var a11 = document.getElementById("121");
    var a12 = document.getElementById("122");
    var divs = [a1,a2,a3,a4,a5,a6,a7,a8,a9,a10,a11,a12]


    htmlStr_min_chart = ""

    for (let index = 0; index < average_min.length; index++) {
        const element = average_min[index];
            divs[index].style.height = element*10;
            divs[index].style.backgroundColor = "blue"    
    }

}


chart();

谢谢

标签： javascripthtmlcss

Answer 1

试试下面这个函数，你的代码中有很多错误，比如：

• 未定义的变量average_min。
• element不能直接相乘，需要先获取元素的高度。
• 您还必须在分配高度时添加“px”后缀。
• 以及htmlStr_min_chart = "";这句话有什么用。

 function chart(){
    var a1  = document.getElementById("111");
    var a2  = document.getElementById("112");
    var a3  = document.getElementById("113");
    var a4  = document.getElementById("114");
    var a5  = document.getElementById("115");
    var a6  = document.getElementById("116");
    var a7  = document.getElementById("117");
    var a8  = document.getElementById("118");
    var a9  = document.getElementById("119");
    var a10 = document.getElementById("120");
    var a11 = document.getElementById("121");
    var a12 = document.getElementById("122");

    a1.style.backgroundColor = "blue";
    a2.style.height = "500px";

    var divs = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12];
    var average_min = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; // This is just an example of how you can use it.

    htmlStr_min_chart = "";
    for (let index = 0; index < average_min.length; index++) {
        element = average_min[index];

        old_height = (parseFloat(element) ? element : 1); // You use multiplication that's why I only use 1, otherwise if you use zero, any value will be zero.
        divs[index].style.height = (old_height * 10) + "px"; // you have to set "px" to assign height.
        divs[index].style.backgroundColor = "blue";
    }
}
chart();

<style type="text/css">div{ margin-bottom: 5px; } </style>
<div id="111"></div>
<div id="112"></div>
<div id="113"></div>
<div id="114"></div>
<div id="115"></div>
<div id="116"></div>
<div id="117"></div>
<div id="118"></div>
<div id="119"></div>
<div id="120"></div>
<div id="121"></div>
<div id="122"></div>