我想根据用户输入在页面上创建一个类似金字塔的结构,该结构应如下所示,
我尝试在 JS 中循环显示结构,但无法根据用户输入更改 JS 循环中的 css 属性。这是此页面上的代码:
var objContainer = document.getElementById("container"),
intLevels = 10,
strBlocksHTML = '';
for (var i = 0; i < intLevels; i++) {
strBlocksHTML += '<div class="buildingBlock"></div>';
strBlocksHTML += '<div></div>'; // Line break after each row
}
objContainer.innerHTML = strBlocksHTML;
.buildingBlock {
display: inline-block;
width: 20px;
height: 20px;
margin: 2px 5px;
background-color: #eee;
border: 2px solid #ccc;
}
#container {
text-align: center;
}
<div id="container"></div>
输出显示为塔,还想去掉每个 <div>
之间的间距元素。如何使用 jquery 或其他方法更改此设置?上图是我想要的输出。
最佳答案
通过将第一个 strBlocksHTML 行更改为
strBlocksHTML += '<div class="buildingBlock" style="width: ' + Number(20 + 40 * i) + 'px"></div>';
有效。
关于javascript - 根据用户输入在页面上创建金字塔结构图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19134244/