How to reset/remove the style attribute with JavaScript in IE9?
Question
I've got a very simple web page spinner using the Prototype JS framework :
Frame nav :
Event.observe(
'doit',
'click',
function(){
parent.window.frames.cont.spinner.removeAttribute('style');
},
false);
Frame cont (this is the first element within the <body> ):
<div id="spinner" style="display: none;"></div>
CSS:
#spinner {
width: 50px;
height: 50px;
position: fixed;
top: 50%;
left: 50%;
background: url(spinner.gif) transparent no-repeat center;
margin-left: -25px;
margin-top: -25px;
z-index: 2;
}
Quite simply, it's a fixed-position <div> centered on the cont frame, and hidden when the browser loads the page (also to avoid problems in non-JS browsers). When the user clicks a button in the nav frame, the style attribute is removed and the user sees the spinner until the next page takes over. This works just fine in Firefox, but IE 9 refuses to work. This is what I've found from their standard F12 interface:
- There is only one element with ID
spinner. - Running
parent.window.frames.cont.spinner.removeAttribute('style')orparent.window.frames.cont.document.getElementById("spinner").removeAttribute("style")in the Console tab returnstruebut results in the next but one element being hidden! This is not reflected in the HTML tab in any discernible way - The hidden element still hasstyle="display: block;".
I tried using Prototype's show() , and it worked in Firefox, but not in IE9...
2 answers
solution1
1 2012-09-05 16:21:00
Why remove the style attribute when it's much easier to add/remove classes? And anyways, if all you're trying to do is show/hide a div, why not just change the "display" style property only?
solution2
1 ACCPTED 2012-09-06 19:57:26
只需将“display”属性设置为“block”，而不是尝试删除style属性。
document.getElementById("spinner").style.display = "block"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.