Скрыть / Показать CSS див с JavaScript - не отображается снова после скрытия -

Question

Элемент div 'container' скрыт после наведения мыши.Когда я снова делаю наведение мыши на пустом месте, где div должен быть, ничего не происходит, значит его не видно.

Что я делаю не так?

<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>

Answer 1

Скрытый элемент не может инициировать события, поэтому в вашем случае я вижу только одно возможное решение: используйте style.opacity = 0 и style.opacity = 1 вместо style.visibility = 'hidden' и style.visibility = 'visible'. Но это не будет работать в старых браузерах.

Также, если вы хотите получить некоторый атрибут стиля, используйте element.style.visibility, а не element.getAttribute('visibility'):

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

Или лучше использовать некоторые js-фреймворки (jQuery, prototype.js, mootools), особенно если вашему проекту требуется много JavaScript.

Answer 2

Я был так сфокусирован на div ... Теперь делаю отображение: нет / блок с таблицей, и это работает.

Answer 3

Вы проверяете атрибут visibility в элементе, но на самом деле он находится на объекте style - но вы можете быть удивлены результатами, даже если вы сделаете element.style.visibility, так как это не всегда даст вам правильный результат(в вашем случае так и будет, потому что вы устанавливаете встроенные стили, что в любом случае является плохой практикой)

Давайте предположим, что вы установили свой стиль CSS для элемента следующим образом:

#user { visibility: hidden; }

Затем вы проверилиit:

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

Он будет содержать пустую строку "" - вместо этого вам в идеале следует использовать getComputedStyle, чтобы фактически получить, какие стили IN USE.

Answer 4

Эта функция очищает всю предыдущую информацию о стиле, поэтому не рекомендуется переключать что-либо.

Вместо этого используйте

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

Answer 5

попробуйте

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