请问如何使用js给一组子元素设置相同的样式？

<div class='box'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

比如，想给.box的所有子元素设置同样的宽和高，如何使用js实现？
不使用继承。

---

document.querySelectorAll('.box > div').forEach(div => {
    div.style.width = '100px'
    div.style.height = '100px'
    div.style.background = '#333'
    div.style.margin = '12px'
})

---

用css就能实现的，为什么要用js？

css:

div.box div {
    height: 100px;
    width: 100px;
}

js:

let elements = document.querySelectorAll("div.box div");
for(let i = 0; i < elements.length; i++) {
    elements[i].style.height = "100px";
    elements[i].style.width = "100px";
}