Question

我尝试以编程方式向DOM添加divs。我想把它们安排在一个＆＃34;大师＆＃34; div，

<body>
<div id="master">


</div>

<script src="js/main.js"></script>
</body>

所以：

window.addEventListener('load',init);

let master;

function init() {
    master = document.getElementById('master');

    const count = 8;
    const radius = 50;
    for (let i=0; i<count;i++){
        const diva = document.createElement('div');
        diva.id = i;
        master.appendChild(diva);
        let {x,y} = returnCoords(100,100,degreesToRad((360/count) * i),radius);
        diva.style.left = x + "px";
        diva.style.top = y + "px";
        console.log(diva.style.width); // empty!
    }

}

function degreesToRad(degrees) {
   return degrees * (Math.PI / 180);

}

function radToDegrees(rad) {
    return radians * (180 / Math.PI);

}

function returnCoords(originX = 0, originY = 0,radians,radius) {
    let x = originX + (Math.cos(radians) * radius);
    let y = originY + (Math.sin(radians) * radius);
    return ({x,y});
}

这些div由SCSS设计：

#master {
  background:pink;
  height:300px;
  width:300px;
  position: relative;
  div {
    background: white;
    height:20px;
    width:20px;
    border:blueviolet solid 1px;
    position:absolute;
  }
}

这一切都很好。但是，即使将其添加到DOM中，我也无法获得width的{{1}}。第div行没有产生任何结果。因此，我无法根据宽度移动console.log(diva.style.width);。我错过了什么？

Answer 1

.style属性读取元素的内联样式，而不是CSS指定的样式。令人困惑，当然。在此处阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

获取动态创建的元素的CSS宽度（Javascript，DOM）

1 个答案: