Javascript 不显示带有 display = “block” 的元素

Javascript doesn't show elements with display = "block"

本文关键字：block 元素 display 显示 Javascript      更新时间：2023-09-26

我通过javascript创建了一个<div>，它的css中有display:hidden;。我想让它成为一个块元素，但它不会出现。这是我的代码。

var fatGooseShop = document.createElement('div');
            fatGooseShop.width = canvas.width / 1.5 + "px";
            fatGooseShop.height = canvas.height / 1.5 + "px";
            fatGooseShop.style.position = "absolute";
            fatGooseShop.style.left = "50%";
            fatGooseShop.style.top = "50%";
            fatGooseShop.style.margin = "-" + (canvas.height / 1.5) / 2 + "px 0px 0px -" + (canvas.width / 1.5) / 2 + "px";
            fatGooseShop.style.backgroundColor = "yellow";
            fatGooseShop.style.display = "none";
function shop()
{
    fatGooseShop.style.display = "block";
}

我从浏览器调用 shop() 函数来运行它，如果这有什么不同的话。

  1. 首先，您需要附加元素

    document.getElementById("test").appendChild(fatGooseShop);
    2. 没有

  2. 内容，您实际上没有设置块的宽度或高度，因此它不可见。您需要按如下方式修改代码。注意：这将起作用，前提是canvas.width返回非零值

fatGooseShop.style.width = canvas.width / 1.5 + "px";
fatGooseShop.style.height = canvas.height / 1.5 + "px";

这里的例子：

http://jsfiddle.net/DigitalBiscuits/cqbzw/6/

您还需要附加元素

x=document.getElementById("something");
x.appendChild(fatGooseShop);

您可以使用createElement创建元素，但是您需要将其appendChild到DOM中的另一个元素，然后才能显示。一旦完成，您就可以操纵它。

您忘了将其附加到文档中。在 JS 文件中，在 //Javascript 下方添加行线。

<!--HTML-->
<div id="the-div">
</div>
//Javascript
document.getElementById("the-div").appendChild(fatGooseShop);
相关文章：