javascript - 如何在 javascript 中正确使用 DOM 样式边距顶部属性？

Question

我试图让我的 div 元素到达屏幕的中心，我已经与中心对齐，但顶部边距仍然卡在顶部并且没有居中。

我试过 divElement.style.marginTop = "100px";但这并没有改变任何东西。

//this is the javascript

function stopDesc(){
var divElement = document.createElement("Div");
divElement.id = "divID";

// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="0 auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";

// Adding a paragraph
var paragraph = document.createElement("P");
var text = 
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);

// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
  alert("Hi!");
});
divElement.appendChild(button);

// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
}

现在 div 居中，但顶部粘在屏幕顶部，我希望它位于中心或距顶部至少 100 像素。

Answer 1

编辑这一行:

divElement.style.margin="0 auto";

并制作:

divElement.style.margin="100px auto";

也许您在该行代码上方添加了 divElement.style.marginTop = "100px" 以使其被覆盖。

var divElement = document.createElement("Div");
divElement.id = "divID";

// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="100px auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";

// Adding a paragraph
var paragraph = document.createElement("P");
var text = 
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);

// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
  alert("Hi!");
});
divElement.appendChild(button);

// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');