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

我通过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()函数来运行它，如果这有区别的话。

最佳答案

首先需要附加元素

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

没有内容，也没有实际设置块的宽度或高度，因此它将不可见。你需要修改你的代码如下。注意：如果canvas.width返回非
零值

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

示例如下：
http://jsfiddle.net/DigitalBiscuits/cqbzw/6/