我想在页面加载时动态创建6个框。它们应该是 inline-block，所以最终它看起来像 3 行，每行有 2 个框。
我在没有任何 JavaScript 的情况下尝试了下面的代码(仅使用了一些静态 HTML 和 CSS)，它似乎工作正常。
一般来说，这个脚本对我来说看起来不错——但是，它什么也没做。我究竟做错了什么？与 CSS 和 JavaScript 的顺序有关吗？
样式1.css:
* {
margin:0;
padding:0;
}
header,section,nav,aside,footer{
display:block;
}
.wrapper{
position: relative;
height: 2150px;
width: 900px;
background-color: #336b98;
margin: 0 auto;
}
section#contentSection_layout3{
position: absolute;
top:193px;
height: 1957px;
width: 900px;
border-right: solid 1px #FFF;
}
HTML 和 JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="includes/style1.css">
<script src="includes/JavaScript.js"></script>
<title> EX </title>
<script>
window.onload = function(){
var boxesNum = 6;
for(var i = 0; i < boxesNum; i++){
var rect = new rect();
rect.setAttribute('display', 'inline-block');
rect.setAttribute('margin-left', '200');
rect.setAttribute('margin-top', '100');
rect.setAttribute('height', '150');
rect.setAttribute('width', '150');
rect.setAttribute('background-color', '#FFF');
document.getElementById('contentSection_layout3').appendChild(rect);
}
};
</script>
</head>
<body>
<div class="wrapper">
<section id="contentSection_layout3"></section>
</div>
</body>
</html>
最佳答案
var rect = new rect();
除非您在其他地方定义了 rect，否则您需要:
var rect = document.createElement('div');
此外，setAttribute 不适用于样式，style 适用于样式。
rect.style.display = 'inline-block';
rect.style.marginLeft '200px';
rect.style.marginTop = '100px';
rect.style.height = '150px';
rect.style.width = '150px';
rect.style.backgroundColor = '#FFF';
另外，不要忘记您的 px。
关于javascript - 动态创建元素并设计元素样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22921219/