如何通过在其中传递数组值来使用 DOM.style 属性更改高度？

Question

我必须更改条的高度并使其等于我的循环生成的随机值。 此值必须在div标签下编辑我的 CSS 的条形 class 。 当我使用样式属性时，我可以更改宽度、颜色等，但是由于某种原因我不能将我的随机 int 值作为高度传递。 我尝试使用模板文字，但这似乎不起作用。

 let bars = []; let arr_length = 10; const sortArea = document.querySelector(".sort-area"); for (let i = 0; i < arr_length; i++) { // height of bars bars.push(Math.floor(Math.random() * 101)); const div = document.createElement("div"); sortArea.append(div); div.classList.add("bar-style"); const barStyle = document.querySelectorAll(".bar-style"); barStyle[i].style.height = `${bars[i]}`; //<-- main issue }

 .bar-style { border: 1px solid pink; margin: 2px; padding: 1.25px; background-color: #f1ff5c; width: 5px; }

 <body> <header class="header"> <h1>Sorting Visualiser</h1> <nav> <button class="btn new-array">New Array</button> <button type="button" class="btn bubble">Bubble Sort</button> <button type="button" class="btn selection">Selection Sort</button> <button type="button" class="btn insertion">Insertion Sort</button> </nav> </header> <main> <div class="sort-area"></div> </main> <script type="text/javascript" src="js_files/arr.js"></script> </body> </html>

强文本

Answer 1

您没有添加测量单位。

你可以这样做：

 barStyle[i].style.height = `${bars[i]}px`;

如何通过在其中传递数组值来使用 DOM.style 属性更改高度？

问题描述

1 个解决方案

解决方案1
3 2021-06-07 17:44:28

如何通过在其中传递数组值来使用 DOM.style 属性更改高度？

问题描述

1 个解决方案

解决方案1 3 2021-06-07 17:44:28

解决方案1
3 2021-06-07 17:44:28