javascript display:none 在 IE7 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4143367/
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
display:none not working in IE7
提问by vedvrat13
Situation:- I have created a RadioButton group. When a User selects a radio button depending upon his choice the content gets displayed and the other content is removed.
情况：- 我创建了一个 RadioButton 组。当用户根据他的选择选择一个单选按钮时，该内容将被显示，而其他内容将被删除。
Problem:- The page is working fine in all browsers except IE7. I need a solution that runs in IE7 also.
问题：- 该页面在除 IE7 之外的所有浏览器中都可以正常工作。我还需要一个可以在 IE7 中运行的解决方案。
Code:-
代码：-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE7 Bug display:none</title>
<style>
#entireContent, #div1, #div2{
display:block;
}
</style>
<script type="text/javascript">
function displayDiv1(){
document.getElementById('div1').setAttribute('style','display:"');
document.getElementById('div2').setAttribute('style','display:none');
}
function displayDiv2(){
document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').setAttribute('style','display:"');
}
</script>
</head>
<body>
<div id="entireContent">
<input type="radio" name="group" value="t1" onclick="displayDiv1()">TEST 1<br>
<input type="radio" name="group" value="t2" onclick="displayDiv2()">TEST 2<br>
<div id="div1">TEST 1</div>
<div id="div2">TEST 2</div>
</div>
</body>
</html>
Resources Referred:- http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
参考资源：- http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
I tried the approach provided in the resource, it didn't work.
我尝试了资源中提供的方法，但没有奏效。
Please help me to resolve this issue. Thanks in Advance.
请帮我解决这个问题。提前致谢。
回答by Sarfraz
You can try this instead:
你可以试试这个：
To Display:
显示：
document.getElementById('element_id').style.display = 'block';
To Hide:
隐藏：
document.getElementById('element_id').style.display = 'none';
That should work.
那应该有效。
回答by Flygenring
Though I agree you should access the property using .style.displayI'd like to make a note of the proper way of altering attributes on elements.
虽然我同意您应该使用访问该属性，但.style.display我想记下更改元素属性的正确方法。
document.getElementById('div2').setAttribute('style','display:"');
This will not emulate .style.display=''as it's not proper syntax for the attribute (css) and even if that part was okay, there is only one quote, so in that mindset you'd set the display attribute equal to the rest of the entire document.
The right way to unset an attribute is using the removeAttributefunction, like this:
这不会模拟，.style.display=''因为它不是属性 (css) 的正确语法，即使该部分没问题，也只有一个引号，因此在这种心态下，您可以将 display 属性设置为等于整个文档的其余部分。
取消设置属性的正确方法是使用该removeAttribute函数，如下所示：
document.getElementById('div1').setAttribute('style','display:none');
document.getElementById('div2').removeAttribute('style');
回答by Mahesh Guttedar
I tried this getElementById("id").style.display = none it will work fine in chrome but facing issue in IE 11 browser
我试过这个 getElementById("id").style.display = none 它可以在 chrome 中正常工作，但在 IE 11 浏览器中遇到问题
I modified as below then it worked for both browser getElementById("id").style.display = "";
我修改如下然后它适用于两个浏览器 getElementById("id").style.display = "";
回答by Tim B James
try using
尝试使用
document.GetElementById('div1').style.display = "block";
document.GetElemebtById('div2').style.display = "none";
