简体   繁体   English

如何在IE9中使用JavaScript重置/删除style属性?

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

I've got a very simple web page spinner using the Prototype JS framework : 我有一个非常简单的网页微调器使用Prototype JS框架

Frame nav : nav

Event.observe(
    'doit',
    'click',
    function(){
      parent.window.frames.cont.spinner.removeAttribute('style');
    },
    false);

Frame cont (this is the first element within the <body> ): cont (这是<body>的第一个元素):

<div id="spinner" style="display: none;"></div>

CSS: 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). 很简单,它是以cont框架为中心的固定位置<div> ,并在浏览器加载页面时隐藏(也是为了避免非JS浏览器中出现问题)。 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. 当用户单击nav框架中的按钮时,将删除style属性,并且用户将看到微调器,直到下一页接管为止。 This works just fine in Firefox, but IE 9 refuses to work. 这在Firefox中运行得很好,但IE 9拒绝工作。 This is what I've found from their standard F12 interface: 这是我从他们的标准F12接口中发现的:

  • There is only one element with ID spinner . 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! 运行parent.window.frames.cont.spinner.removeAttribute('style')parent.window.frames.cont.document.getElementById("spinner").removeAttribute("style") 控制台选项卡中的parent.window.frames.cont.document.getElementById("spinner").removeAttribute("style")返回true但结果为下一个但是隐藏了一个元素! This is not reflected in the HTML tab in any discernible way - The hidden element still has style="display: block;" 这没有以任何可辨别的方式反映在HTML选项卡中 - 隐藏元素仍然具有style="display: block;" .

I tried using Prototype's show() , and it worked in Firefox, but not in IE9... 我尝试使用Prototype的show() ,它在Firefox中有效,但在IE9中却没有...

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? 无论如何,如果您要做的只是显示/隐藏div,为什么不只更改“display”样式属性呢?

只需将“display”属性设置为“block”,而不是尝试删除style属性。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM