動態創建和樣式化元素

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和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 個解決方案

解決方案1
3 已采納 2014-04-07 19:37:28

動態創建和樣式化元素

問題描述

1 個解決方案

解決方案1 3 已采納 2014-04-07 19:37:28

解決方案1
3 已采納 2014-04-07 19:37:28