制作一個按鈕來創建框

Question

每當用戶單擊按鈕時，我都必須在div內創建框（這里的div是box ）。 到目前為止，我已完成以下操作，但未創建任何框。

代碼：

<!DOCTYPE html>
<html>
    <head>
        <style>
      .myDiv {
        height: 50px;
        width: 50px;
        border-color: blue;
          }
      #box {
        width: 700px;
        height: 700px;
        border: solid black;
      }
    </style>
    </head>
    <body>
        <h1>The onclick Event</h1>
        <button id ="theBoxes" >Creating boxes</button>
        <div id = "box"></div>
        <script>
        var x = document.getElementById("theBoxes");
        x.addEventListener("click", myFunction)
          function myFunction() {
            var box = document.createElement('div');
            box.classList.add('myDiv');
            document.body.appendChild(box); 
          }
          </script>
    </body>
</html>

Answer 1

 var x = document.getElementById("theBoxes"); x.addEventListener("click", myFunction) function myFunction() { var box = document.createElement('div'); box.classList.add('myDiv'); document.body.appendChild(box); }

 .myDiv { height: 50px; width: 50px; border: 1px solid blue; } #box { width: 700px; height: 700px; border: solid black; position: absolute; }

 <!DOCTYPE html> <html> <head> </head> <body> <h1>The onclick Event</h1> <button id ="theBoxes" >Creating boxes</button> <div id = "box"></div> </body> </html>

您的代碼正在運行，不幸的是， myDiv中的border-color: blue不起作用，並且該框也添加到了 div #box之外。

因此，我通過在#box添加position: absolute和在.myDiv添加border: 1px solid blue來修改您的代碼。

制作一個按鈕來創建框

問題描述

1 個解決方案

解決方案1
0 2018-10-14 02:04:56

制作一個按鈕來創建框

問題描述

1 個解決方案

解決方案1 0 2018-10-14 02:04:56

解決方案1
0 2018-10-14 02:04:56