使用javascript隐藏/显示css div - 隐藏后不再显示 -

The div 'container' is hidden once I do a mouseover. When I do again a mouseover on the empty space where the div is supposed to be nothing happens means its not getting visible.

一旦我进行鼠标悬停，div'容器'就会被隐藏。当我再次在空白区域上执行鼠标操作时，div应该没有任何反应意味着它不可见。

What do I wrong?

我错了什么？

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

   <script type="text/javascript">
       function ShowUserInterface(containerToSwitch) {
           debugger;
           var element = document.getElementById(containerToSwitch);

           if (element.getAttribute("visibility") == "hidden")
               element.setAttribute("style", "visibility: visible");
           else
               element.setAttribute("style", "visibility: hidden");  


       }
</script> 
<div  style="visibility:visible;width:200px;height:200px;background-color:Aqua" onmouseover="ShowUserInterface(this.id)" id="container" >
    <uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</asp:Content>

5 个解决方案

#1

Hidden element can't fire events, so in your case I see only one possible solution: use style.opacity = 0 and style.opacity = 1 instead of style.visibility = 'hidden' and style.visibility = 'visible'. But this won't work in old browsers.

隐藏元素无法触发事件，因此在您的情况下，我只看到一种可能的解决方案：使用style.opacity = 0和style.opacity = 1而不是style.visibility ='hidden'和style.visibility ='visible'。但这在旧浏览器中不起作用。

Also if you want to get some style attribute use element.style.visibility, not element.getAttribute('visibility'):

另外，如果你想获得一些样式属性，请使用element.style.visibility，而不是element.getAttribute（'visibility'）：

if (element.style.visibility == "hidden")
    element.style.visibility = "visible";
else
    element.style.visibility = "hidden";

Or better use some js framework (jQuery, prototype.js, mootools), especially if your project requires much of JavaScript.

或者更好地使用一些js框架（jQuery，prototype.js，mootools），特别是如果你的项目需要大量的JavaScript。

#2

try this

尝试这个

" if (element.style.visibility == "hidden") element.style.visibility = "visible"; else element.style.visibility = "hidden";
"

“if（element.style.visibility ==”hidden“）element.style.visibility =”visible“; else element.style.visibility =”hidden“;”

#3

This function clears all previous style info so not a best practice do toogle something.

此功能清除所有以前的样式信息，因此不是最佳做法。

Instead use

而是使用

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

#4

Your checking for the visibility attribute on the element, but it's actually on the style object -- but you might be surprised with results even when you do element.style.visibility as this might not always give you the right result (in your case it will, because your setting inline styles which is bad practice anyway)

您检查元素上的visibility属性，但它实际上是在样式对象上 - 但即使您执行element.style.visibility也可能会对结果感到惊讶，因为这可能并不总能给您正确的结果（在您的情况下它）会，因为你设置的内联样式无论如何都是不好的做法）

Let's assume you set your CSS style on the element like so:

我们假设您在元素上设置CSS样式，如下所示：

#user { visibility: hidden; }

Then you checked for it:

然后你检查了它：

alert(document.getElementById('user').style.visibility);

It'll contain an empty string "" -- instead you should ideally use getComputedStyle to actually get what styles are IN USE.

它将包含一个空字符串“” - 相反，您应该理想地使用getComputedStyle来实际获取IN USE中的样式。

#5

I was so focused on a div... Now doing the display: none/block with a table and it work.

我是如此专注于一个div ...现在做显示：无/块与表，它的工作。

#1