Question

我想使用JavaScript以编程方式设置HTML页面，但是我遇到了带有边距的样式问题。这是一个最小的示例：

window.onload = function() {

  var div0 = document.getElementById('box2');
  div0.style.border = '1px solid black';

  var div1 = document.createElement('div');
  div0.appendChild(div1);
  div1.innerHTML = "This is programmatic";
  div1.style.width = '300px';
  div1.style.height = '200px';
  div1.style.background = 'pink';
  div2.style.marginTop = '20px';
  div2.style.marginLeft = '20px';
};

<div id="box1" style="border:1px solid black">
  <div style="width:300px;height:200px;background:lightgreen;margin-left:20px;margin-top:20px">
    This is regular styled HTML</div>
</div>
<div id="box2"></div>

显示如下：

程序化版本（粉红色）似乎忽略了边距。以编程方式创建的元素有什么不同吗？我发现两个div的样式没有差异。

Answer 1

这是因为您正在引用一个名为div2的变量-该变量不存在-如果将其更改为div 1-那么它可以正常工作。

<html>
  <head>
    <title></title>
    <meta content="">
    <style></style>
    <script>
        window.onload = function () {

            var div0 = document.getElementById('box2');
            div0.style.border='1px solid black';

            var div1 = document.createElement('div');
            div0.appendChild(div1);
            div1.innerHTML="This is programmatic";
            div1.style.width='300px';
            div1.style.height='200px';
            div1.style.background='pink';
            div1.style.marginTop='20px'; // I altered this line
            div1.style.marginLeft='20px'; // I altered this line
        };
    </script>
  </head>
  <body>
    <div id="box1" style="border:1px solid black">
      <div style="width:300px;height:200px;background:lightgreen;margin-left:20px;margin-top:20px">
        This is regular styled HTML</div>
      </div>
    <div id="box2"></div>
  </body>
</html>

Answer 2

将div2更改为div1即可。控制台中有一个提示： index.html:18 Uncaught ReferenceError: div2 is not defined at window.onload

奖金：

在css文件和JS中定义类，只需像这样添加它们：

div1.classList.add('myClass')

为什么浏览器会忽略编程元素上的边距？

2 个答案:

奖金：