style.display =“block”不适用于ie和chrome

Question

我需要在提交

上隐藏表单

<form id="details_form" class="form-horizontal" role="form">

并显示游戏“pacman”

<div id="pacman"></div>

我正在使用style.display属性来隐藏和显示div和表单

$(document).ready(function() {

_("pacman").style.display = "none";

$("form").submit(function(e) {
    _("details_form").style.display = "none";
    if(_("details_form").style.display === "none"){
        _("pacman").style.display = "block";
    }
    return false; // prevents page refresh! :) yay!!
});
});

在Chrome和IE上：

但是，在Firefox上：

我还将它托管在服务器上并进行了检查。但结果相同。发生了什么？在Github

上查看我的代码

Answer 1

由于您已经拥有了jQuery，因此编写document.getElementById的另一个替代品并没有用。不要混用DOM和jQuery。

您可能想要这样做

$(function() {
   $("#pacman").hide();
   $("#details_form").on("submit",function(e) {
     e.preventDefault(); // cancel form submission
     $(this).hide();
     $("#pacman").show();
   });
});

更新：这是X / Y问题的一个很好的例子。

这是你的问题：

<div id="pacman"></div>

var el = document.getElementById("pacman")

以后：

 blockSize = wrapper.offsetWidth / 19,  // <<<<< this is 0 on some browsers
 canvas    = document.createElement("canvas");

 canvas.setAttribute("width", (blockSize * 19) + "px");
 canvas.setAttribute("height", (blockSize * 22) + 30 + "px");

创建

<div id="pacman" style="display: block;"><canvas width="0px" height="30px"></canvas></div>

在你“取消隐藏”div之后立即在Chrome中播放！使用setTimeout显示

How do I retrieve an HTML element's actual width and height?

Answer 2

mplungjan的

+1只使用jQuery来操作你的DOM元素：

$(document).ready(function() {
            $("#pacman").hide();
            $("form").submit(function(e) {
                $("#details_form").hide();
                if($("#details_form").hide()){
                    $("#pacman").show();
                }
                return false; // prevents page refresh! :) yay!!
            });
        });

我建议更好地了解jQuery，这可能是一个好的开始：

1. https://learn.jquery.com/effects/intro-to-effects/
2. https://learn.jquery.com/using-jquery-core/manipulating-elements/

Answer 3

罪魁祸首是init（）函数中的代码：

blockSize = wrapper.offsetWidth / 19,
canvas    = document.createElement("canvas");        
canvas.setAttribute("width", (blockSize * 19) + "px");
canvas.setAttribute("height", (blockSize * 22) + 30 + "px");

其中，wrapper = div #pacman。 当style.display设置为“none”时，offsetWidth属性变为0。所以，添加

window.setTimeout(function(){_("pacman").style.display = "none";}, 100); 

完成了这项工作。