javascript - 获取动态创建元素(Javascript,DOM)的CSS宽度
问题描述
我正在尝试以divs
编程方式添加到 DOM。我想把它们排列成一个“主人”内的圆圈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
s 由 SCSS 样式化:
#master {
background:pink;
height:300px;
width:300px;
position: relative;
div {
background: white;
height:20px;
width:20px;
border:blueviolet solid 1px;
position:absolute;
}
}
这一切都很好。但是,即使将其添加到 DOMwidth
中,我也无法获得。div
这条线console.log(diva.style.width);
什么也不生产。因此我不能divs
根据它们的宽度移动它们。我错过了什么?
解决方案
该.style
属性读取元素的内联样式,而不是 CSS 指定的样式。令人困惑,当然。在此处阅读更多信息:https ://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
推荐阅读
- react-native - 断开连接后重新连接到 Metro 服务器
- for-loop - 永无止境的“for”循环会阻止我的 RStudio 笔记本被渲染成 .md 文件
- mysql - MySQL:我需要根据某些条件返回行
- javascript - Ajax 滑块不会移动到下一张幻灯片
- python - Python Regex 匹配空格或开括号
- c# - C# 中的 OldeDb 对象异常
- javascript - 在另一个应用程序(网络应用程序)中打开下载的文件
- c# - 如何在 .NET Core 中侦听设备更改。(需要替代 WindowsForms NativeWindow 类)
- python - 将 (key: list) 展开为包含所有映射对的字典
- python - 我制作了一个打开 Google 的按钮。我已经解决了这个问题,但我想知道为什么它会起作用