当元素在Javascript中可见时，它会切换回隐藏状态

When element got visible in Javascript it toggle back to hidden

本文关键字：状态 隐藏 元素 Javascript      更新时间：2023-09-26

请帮助，因为当我点击并调用Javascript函数来取消隐藏元素时，它会再次隐藏。只需一秒钟或更短的时间。

HTML 

<asp:Button ID="btnFromCalOpen" Width = "35" runat="server" Text="&gt;"  style="display:none; visibility:hidden;"  OnClientClick ="ShowCal()"  />
Javascript 

function ShowCal() {
var elem = document.getElementById('MainContent_CalendarFrom');
if (elem.visibility = "hidden" ) {
    alert("Show");
    elem.style.visibility = "visible";
    elem.style.display = "inline";
}
else {
    alert("Hide");
    elem.style.visibility = "hidden";
    elem.style.display = "none";
}
}

当我点击按钮时它会刷新所有元素的样式属性

请帮

你的代码中有一个错误/bug 

if (elem.visibility = "hidden" ) {

你没有检查if，但你把它设置为隐藏!

要避免这种错误，请尝试以下方法

if ("hidden" == elem.visibility ) {

代码中的两个主要问题。

  1. elem.visibility不是对象的属性。如果您想查看样式设置，它将是elem.style.visibility。
  2. 与==或===比较，不与=比较。你正在对=进行赋值操作。

试试这个代码:

function ShowCal() {
    var elem = document.getElementById('MainContent_CalendarFrom');
    if (elem.style.visibility == "hidden" ) {
        alert("Show");
        elem.style.visibility = "visible";
        elem.style.display = "inline";
    }
    else {
        alert("Hide");
        elem.style.visibility = "hidden";
        elem.style.display = "none";
    }
}

仅供参考，不需要同时设置style.visibility和style.display。如果你要设定风格。显示为"none"，则不需要可见度设置。

你的代码的一个更简单的版本应该是这样的(你可以看到在这个jsFiddle中工作):

function ShowCal() {
    var elem = document.getElementById('MainContent_CalendarFrom');
    if (elem.style.display == "none" ) {
        elem.style.display = "inline";
    } else {
        elem.style.display = "none";
    }
}

并且，从这个标签的HTML中删除visibility: hidden。display: none是你所需要的。

作为参考(如果可能的话)，这里是jQuery或YUI等库非常方便的地方之一。在jQuery中，这将是:

function ShowCal() {
    $("#MainContent_CalendarFrom").toggle();
}
相关文章：