Question

我在下面的代码中看到的javascript中创建了一个按钮，但无法对其设置样式。 text-align：center或margin：0都不起作用。有没有人有办法解决吗？谢谢！

button = document.createElement("button");
button.innerHTML = "Reset High Score"
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener("click", function() {
  alert("High Score Reset!");
  localStorage.clear();
  location.reload();
})

button {
  margin: 0 auto;
  text-align: center;
}

Answer 1

原因是您没有直接将内联元素居中，而是将居中应用于它们的父元素，并且容器的内容居中。另外，inline elements没有边距或填充，只有block-level元素有。

text-align是inherited property。这意味着它会影响其后代元素而不是自身。

知道一个元素是块元素还是内联元素非常重要，因为正如您所发现的那样，某些CSS属性只能在一个属性上作用于另一个属性。

发现内联与块级元素实际上非常容易。块级元素将其内容放在新行中，而内联元素则不行。因此，div是一个块，而button是一个内联。知道这一点，当您查看CSS文档时，可以看到该属性是否适用于您拥有的元素类型。在我之前提到的关于text-align的链接中，如果向下滚动到浏览器兼容性图表的上方，则会看到text-align的链接，它表示这是一个继承的属性，并应用于块。

button = document.createElement("button");
button.innerHTML = "Reset High Score"
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener("click", function(){
    alert("High Score Reset!");
    localStorage.clear();
    location.reload();
})

body {
margin: 0 auto;
text-align: center;

}

仅供参考：

永远不要，永远不要这样做：document.getElementsByTagName("body")[0]。请阅读this other post of mine，其中说明了这有多严重。相反，请使用.querySelector()，或者在这种情况下，因为您只需要一个body的子元素document，因此可以编写document.body。

button = document.createElement("button");
button.innerHTML = "Reset High Score"
var body = document.querySelector("body"); // Instead of getElementsByTagName()
var body = document.body; // The easiest way to get a reference to the body element
body.appendChild(button);
button.addEventListener("click", function(){
    alert("High Score Reset!");
    localStorage.clear();
    location.reload();
})

body {
margin: 0 auto;
text-align: center;

}

无法使用CSS将JavaScript创建的按钮居中

1 个答案: