为什么在 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();

谢谢

Answer 1

试试下面的这个函数，你的代码中有很多错误，比如：未定义的 var .average_minelement不能直接乘法，需要先得到元素的高度。此外，在分配高度时，您必须在修复后添加“px”。以及这种说法有什么用。htmlStr_min_chart = "";&nbsp;function chart(){&nbsp; &nbsp; var a1&nbsp; = document.getElementById("111");&nbsp; &nbsp; var a2&nbsp; = document.getElementById("112");&nbsp; &nbsp; var a3&nbsp; = document.getElementById("113");&nbsp; &nbsp; var a4&nbsp; = document.getElementById("114");&nbsp; &nbsp; var a5&nbsp; = document.getElementById("115");&nbsp; &nbsp; var a6&nbsp; = document.getElementById("116");&nbsp; &nbsp; var a7&nbsp; = document.getElementById("117");&nbsp; &nbsp; var a8&nbsp; = document.getElementById("118");&nbsp; &nbsp; var a9&nbsp; = document.getElementById("119");&nbsp; &nbsp; var a10 = document.getElementById("120");&nbsp; &nbsp; var a11 = document.getElementById("121");&nbsp; &nbsp; var a12 = document.getElementById("122");&nbsp; &nbsp; a1.style.backgroundColor = "blue";&nbsp; &nbsp; a2.style.height = "500px";&nbsp; &nbsp; var divs = [a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12];&nbsp; &nbsp; 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.&nbsp; &nbsp; htmlStr_min_chart = "";&nbsp; &nbsp; for (let index = 0; index < average_min.length; index++) {&nbsp; &nbsp; &nbsp; &nbsp; element = average_min[index];&nbsp; &nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; &nbsp; divs[index].style.height = (old_height * 10) + "px"; // you have to set "px" to assign height.&nbsp; &nbsp; &nbsp; &nbsp; divs[index].style.backgroundColor = "blue";&nbsp; &nbsp; }}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>

Answer 2

尝试添加“px”divs[index].style.height&nbsp;=&nbsp;element*10&nbsp;+&nbsp;"px";