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') or parent.window.frames.cont.document.getElementById("spinner").removeAttribute("style") in the Console tab returns true but 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 has style="display: block;".

I tried using Prototype's show(), and it worked in Firefox, but not in IE9...

The DOM API (getAttribute/removeAttribute,etc) have historically had issues dealing with synthesized properties (the gap between the DOM text and the actual objects that can be accessed via JavaScript). This appears to be one such case. I highly recommend using CSS classes or "standard" CSS inline property manipulation. — user166390
– user166390, Commented Sep 5, 2012 at 16:38
@JohnnyMopp parent.window.frames.cont.spinner.style.display = 'block'; worked - Can you make your comment an answer? — l0b0
– l0b0, Commented Sep 6, 2012 at 7:29

001 · Accepted Answer · 2012-09-06 19:57:26Z

1

Instead of trying to remove the style attribute, just set the "display" property to "block".

document.getElementById("spinner").style.display = "block"

answered Sep 6, 2012 at 19:57

001

13.6k5 gold badges38 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ian · Accepted Answer · 2012-09-05 16:21:00Z

1

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?

answered Sep 5, 2012 at 16:21

Ian

51k13 gold badges104 silver badges111 bronze badges

Collectives™ on Stack Overflow

How to reset/remove the style attribute with JavaScript in IE9?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related