새 탭 div의 여백이 전혀 적용되지 않습니다.

Question

안녕하세요 저는 JavaScript를 사용하여 새 탭에서 동적 양식을 만듭니다. div에 대한 여백 효과가 적용되지 않습니다. CSS에서 div 및 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 속성이 사업부에 적용되지되고있다. 나는 또한 같은 사용하여 클래스를 적용`,하지만 여전히 차이를 찾을 수 없습니다;

#myDIV2{ 

    background-color:lightblue; 
} 

나는 div.id="myDIV2"; 나는 또한 div.setAttribute("id","myDIV2") 시도

을 시도했다. 나는 왜 그것이 작동하지 않고 무엇이 잘못되었는지를 모른다. '바이올린 원 : 당신은 스타일을 당신의 setAttribute를 호출 할 때마다 무시하고

Answer 1

도와주세요, 스타일을 결합하려고하고 스타일이 한 번만 속성을 설정합니다

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

주 stackoverflow에 대한 작업, 코드 형식이 더 쉽기 때문에 사용했습니다.

Answer 2

모든 스타일 속성이 이전에 div.setAttribute 및 y로 덮어 쓰기 때문에 이러한 현상이 발생합니다 우리의 마지막 속성 div.setAttribute("style","background-color:lightblue");이 적용됩니다. 한 번에 모든 스타일을 넣으십시오. div.setAttribute("style","style1:value1;style2:value2;style3:value3;");