我在下面的代码中用 javascript 创建了一个按钮,但我无法设置它的样式。 text-align:center 和 margin: 0 auto 都不起作用。有没有人有办法解决吗?谢谢!
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;
}
最佳答案
原因是您不直接将内联元素居中,而是将居中应用于它们的父元素,然后容器的内容居中。另外,inline elements没有边距或填充,只有 block-level元素做。
text-align
是一个 inherited property .这意味着它影响其后代元素而不是自身。
了解一个元素是 block 元素还是内联元素非常重要,因为正如您通过艰难的方式发现的那样,某些 CSS 属性只适用于其中一个元素,而不是另一个元素。
实际上很容易区分内联元素和 block 级元素。 block 级元素将它们的内容放在一个新行上,而内联元素则不会。因此,div
是一个 block ,而 button
是一个内联。知道这一点,当你查看 CSS 文档时,你可以看到该属性是否适用于你拥有的元素类型。在我之前提到的关于 text-align
的链接中,如果您向下滚动到浏览器兼容性图表的正上方,您会看到对于 text-align
,它表示它是继承的属性并应用于 block 。
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;
}
关于javascript - 无法使用 css 居中 javascript 创建的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56318230/