我有这个 api data 来自服务器，我想根据每个响应动态呈现数据。当我试图更改div的样式时出现问题
假设我有这个div容器 4 child element ```

.parent {
width: 10em;
height: 10em;
border: 2px solid black;
/* display: flex;
justify-content: center;
align-items: center;
flex-direction: column; */
position: relative;
}

.parent > div {
background-color: green;
width: 2em;
height: 2.3em;
border: 1px solid black;
}

这是你的电话号码 `js` 只有一块数据

const data = [59.18, 70.39, 77.8, 60.43, 57.09, 53.59, 47.66, 61.3, 47.64, 55.45,
43.57, 72.31, 54.03, 63.32, 52.37, 45.14, 53.2, 48.16, 51.13, 45.34];

const dataOne = data[1];
console.log(data);

// childOne.style.width = '60%';

const markup = data.map(el =>{
return `

document.body.insertAdjacentHTML('afterbegin',markup);

我在我的新手保险库中尝试了很多技术，以下是目前为止的一些

let childOne = document.getElementById('child_1');
childOne.style.width= ${data}%;

如果我这样做，什么也不会发生：s
另一个要检查-

let childOne = document.getElementById('child_1');
childOne.style.width= ${dataOne}%;
//This only applies to the first div and rests have no idea about this code

我在这里尝试用纯香草js来实现这一点。任何其他呈现进度条的方法都将不胜感激。：）