Javascript 不显示 display = "block"的元素

Question

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

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()从浏览器运行它的功能，如果有区别的话。

Answer 1

1. 首先你需要追加元素

   document.getElementById("test").appendChild(fatGooseShop);
   

2. 没有内容，您实际上没有设置 block 的宽度或高度，因此它不会显示。您需要按如下方式修改您的代码。注意:如果 canvas.width 返回一个非零值

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

这里的例子:

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