新标签div的边距完全没有生效

Question

您好我正在使用JavaScript在新标签页面中创建动态表单。保证金对div的影响没有生效。我既不能在css中使用class和id设置边距，也不能使用div.setAttribute。下面是代码。 `

var openWindow = window.open('dynForm.html','_blank','');
    var windoc=openWindow.document;
    windoc.write("This is dynamic form ");
    var div=document.createElement("div");
    div.setAttribute("style","border:solid");
    div.setAttribute("style","margin-left:1cm");
    div.setAttribute("style","margin-right:1cm");
    div.setAttribute("style","margin-bottom:1cm");
    div.setAttribute("style","margin-top:1cm");
    div.setAttribute("style","background-color:lightblue");

`只有背景颜色在新标签上生效。以下屏幕截图显示了屏幕的外观，与边距值无关。

Quesstion 2 ：我的css中没有类或id属性应用于div。

    #myDIV2{

    background-color:lightblue;
}

我尝试了div.id="myDIV2";

我也试过div.setAttribute("id","myDIV2");`我也使用了同样的类，但仍然找不到任何区别。我不知道为什么它不起作用，这里出了什么问题。请帮忙

Answer 1

每次调用setAttribute时都会覆盖样式，尝试组合样式，然后只设置样式属性一次：

＆＃13;

＆＃13;

var openWindow = window.open('dynForm.html','_blank','');
    var styles= [
      "border:solid;",
      "margin: 1cm;",
      "background-color:lightblue;"
    ];
    var windoc=openWindow.document;
    windoc.write("This is dynamic form ");
    var end_styles = "";
    for (var i=0; i<styles.length;i++) {
        end_styles += styles[i];
    }
    var div=document.createElement("div");
    div.setAttribute("style", end_styles);

＆＃13;

＆＃13;

＆＃13;

注意：小提琴不能在stackoverflow上工作，我使用它因为它更容易格式化代码

Answer 2

这种情况正在发生，因为您的所有样式属性都被之前的div.setAttribute覆盖，并且您的上一个属性div.setAttribute("style","background-color:lightblue");已被应用。尝试将所有款式合二为一。 div.setAttribute("style","style1:value1;style2:value2;style3:value3;");