<分区>
javascript - style.display = "block"不适用于 ie 和 chrome
我需要在提交时隐藏表单
<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 上检查我的代码
最佳答案
因为您已经有了 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?
关于javascript - style.display = "block"不适用于 ie 和 chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36734835/