Die Ränder in div der neuen Registerkarte überhaupt nicht wirksam

Question

Hallo Ich erstelle dynamische Form in neue Registerkarte mit JavaScript. Margin-Effekte auf Div treten nicht in Kraft. Ich bin weder in der Lage, die Ränder mit der Klasse und der ID in css noch mit div.setAttribute zu setzen. Unten ist der Code. `

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"); 

` Nur Hintergrundfarbe wird auf der neuen Registerkarte Wirksam. Der folgende Screenshot zeigt, wie der Bildschirm unabhängig von den Randwerten aussieht.

Quesstion 2: Keine Klasse oder id-Attribut in meinem css auf div angewendet wird.

#myDIV2{ 

    background-color:lightblue; 
} 

Ich versuchte div.id="myDIV2";

Ich habe auch versucht div.setAttribute("id","myDIV2"); `ich das gleiche mit Klasse auch angewandt, aber immer noch keinen Unterschied finden konnte. Ich weiß nicht, warum es nicht funktioniert und was hier schiefgelaufen ist. Bitte helfen

Answer 1

Sie überschreiben die Stile jedes Mal, wenn setAttribute rufen, versuchen die Stile kombiniert und dann den Stil-Attribut nur einmal:

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);

Hinweis: die Geige gewonnen‘ t arbeiten auf stackoverflow, ich habe es verwendet, weil es einfacher ist, Code zu formatieren

Answer 2

Dies passiert, weil Ihr Attribut alle Stil durch vorherige div.setAttribute und y überschrieben werden unser letztes Attribut div.setAttribute("style","background-color:lightblue"); wird angewendet. Versuchen Sie, alle Stile auf einmal zu platzieren. div.setAttribute("style","style1:value1;style2:value2;style3:value3;");