Question

我想在加载页面时动态创建6个框。它们应该是inline-block，所以最终它看起来像3行，每行有2个框。

我在没有任何JavaScript的情况下尝试了下面的代码（只使用了一些静态HTML和CSS），它似乎运行正常。

一般来说，脚本看起来很好 - 但是，它什么也没做。我究竟做错了什么？这是关于CSS和JavaScript的顺序吗？

style1.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＆amp; 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>

Answer 1

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。

动态创建和样式化元素

1 个答案: