javascript 为什么我无法在 Internet Explorer 8 中显示或隐藏，我该如何解决这个问题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6263142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why am I not able to show or hide in Internet Explorer 8, and how I can fix the problem?
提问by umesh shrivas
I have written JavaScript code to show and hide the div. But I got stuck when it is not working in Internet Explorer 8. It is working smoothly in other browsers, like Opera, Firefox etc.
我已经编写了 JavaScript 代码来显示和隐藏 div。但是当它在 Internet Explorer 8 中无法运行时我卡住了。它在其他浏览器中运行顺畅，如 Opera、Firefox 等。
Here is my code:
这是我的代码：
<html>
<head>
<title>Javascript Show Hide Div Visibility</title>
<style type="text/css">
</style>
<script language="javascript" type="text/javascript">
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.visibility;
if(divstyle.toLowerCase()=="visible" || divstyle == "")
{
document.getElementById("div1").style.visibility = "hidden";
}
else
{
document.getElementById("div1").style.visibility = "visible";
}
}
</script>
</head>
<body>
<div id="div1" class="divStyle">
<object width="300" height="300">
<param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U">
</param>
<embed src="http://www.youtube.com/v/7_6B6vwE83U"
type="application/x-shockwave-flash"
width="300"
height="300">
</embed>
</object>
</div>
<center>
<div onclick="showHideDiv()">Click Me For show hide <div>
</center>
</body>
</html>
回答by Walialu
try:
尝试：
var div1 = document.getElementById("div1");
if(div1.style.display=="none" || div1.style.display == ""){
document.getElementById("div1").style.diplay = "block";
}
else{
div1.style.display = "none";
}
回答by mplungjan
Your page works just fine in Firefox 4 and Internet Explorer 8 on Windows XP.
您的页面在 Windows XP 上的 Firefox 4 和 Internet Explorer 8 中运行良好。
Yours: http://jsfiddle.net/mplungjan/2KZ47/
你的：http: //jsfiddle.net/mplungjan/2KZ47/
Mine: http://jsfiddle.net/mplungjan/7bxrB/
我的：http: //jsfiddle.net/mplungjan/7bxrB/
<html>
<head>
<title>Javascript Show Hide Div Visibility</title>
<style type="text/css">
.center {text-align:center}
#div1 {visibility:visible}
</style>
<script language="javascript" type="text/javascript">
function showHideDiv() {
var div = document.getElementById("div1");
div.style.visibility=(div.style.visibility==="visible"||div.style.visibility==="")?"hidden":"visible";
}
</script>
</head>
<body>
<div id="div1" class="divStyle">
...
</div>
<div class="center" onclick="showHideDiv()">Click Me For show hide <div>
</body>
</html>
回答by Frank Conijn
The respondents that have tested it all report that it works fine in their IE8. That would leave three options open:
测试过它的受访者都报告说它在他们的 IE8 中运行良好。这将留下三个选项：
- No Doctype declaration (I'm assuming the testers put that over it manually).
- It concerned an intranet site, temporarily or permanently. IE8+ has a Compatibility Mode/View (= IE7), which it defaults to in case an intranet site is requested. Exceptions are made for sites of which the URL starts with 'localhost' of '127.0.0.1', the address of the on-computer server(-simulator), if installed.
- The OP had his IE8 set to 'View all sites in Compatibility Mode/View'.
- 没有 Doctype 声明（我假设测试人员手动将其放在上面）。
- 它涉及临时或永久的内联网站点。IE8+ 有一个兼容模式/视图 (= IE7)，它在请求 Intranet 站点时默认使用。对于 URL 以 '127.0.0.1' 的 'localhost' 开头的站点除外，这是计算机上服务器 (-simulator)（如果已安装）的地址。
- OP 将他的 IE8 设置为“以兼容模式/视图查看所有站点”。
回答by Sebo
There is a filter property (style.filter)that IE8 sets it to alpha(opacity=0). Just set it to undefinedand the element pops up again.
有一个过滤器属性(style.filter)，IE8 将其设置为alpha(opacity=0). 只需将其设置为未定义，元素就会再次弹出。
回答by DanielB
Try using display:
尝试使用display：
function showHideDiv()
{
var divstyle = new String();
divstyle = document.getElementById("div1").style.display;
if(divstyle.toLowerCase()=="block" || divstyle == "")
{
document.getElementById("div1").style.display= "none";
}
else
{
document.getElementById("div1").style.display= "block";
}
}
回答by mkilmanas
jQueryis your best friend when working with DOM.
在使用 DOM 时，jQuery是您最好的朋友。
<style type="text/css">
.hidden {
visibility: hidden;
}
</style>
<script type="text/javascript">
$(function(){
$('.trigger').click(function(){
$('#div1').toggleClass('hidden');
});
});
</script>
<div id="div1" class="divStyle">
<object width="300" height="300">
<param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U"></param>
<embed src="http://www.youtube.com/v/7_6B6vwE83U" type="application/x-shockwave-flash" width="300" height="300"></embed>
</object>
</div>
<center>
<div class="trigger">Click Me For show hide</div>
</center>
