如何更改Div的可见性

我想在按下按钮时更改DIV的可见性。什么是错，此代码如何更改Div的可见性

 <p id="myP">This is a p element.</p> 

    <button type="button" onclick="myFunction()">Hide content of p</button> 

    <script> 
     function myFunction() { 
      var which= document.getElementById("myP"); 

      if (which.style.visibility=="visible") 
       which.style.visibility = "hidden" 
      else 
       which.style.visibility = "visible" 
     } 

    </script> 

    </body>

来源

2016-04-25 Muhammad Abdullah

原始HTML没有style="visibility: visible"。所以which.style.visibility返回null。因此，if(which.style.visibility)失败。

添加显式样式，它应该工作。

function myFunction() { 
 
    var which = document.getElementById("myP"); 
 

 
    if (which.style.visibility == "visible") 
 
    which.style.visibility = "hidden" 
 
    else 
 
    which.style.visibility = "visible" 
 
}

<p id="myP" style="visibility: visible;">This is a p element.</p> 
 

 
<button type="button" onclick="myFunction()">Hide content of p</button>

来源

2016-04-25 20:02:07 Barmar

谢谢先生@Barmar –

更新我固定的代码，但它仍然对第一次点击伪装，当它intiliaze显示属性。只有当你不想改变html标签时，这个解决方案才是好的。

使用的style.display INSEAD

function myFunction() { 
     var which= document.getElementById("myP"); 

     if (which.style.display =="") 
      which.style.display = "none" 
     else 
      which.style.display = "" 
    }

来源

2016-04-25 20:00:32

没有任何反应。如果（无）不显示？？ @the scion –

我修复了代码 –

解决！不管怎样，谢谢！ –

你现有的代码应该工作。唯一的问题是，你没有明确最初设置visibility属性（如您的if语句是检查）：

<!-- Since visibility wasn't there, your code couldn't detect it --> 
<p id="myP" style='visibility: visible'>This is a p element.</p>

你可以解决此加入它，如果它不存在：

function myFunction() { 
    // Grab your element 
    var which = document.getElementById('myP'); 
    // Hide it if it is explicitly visible or the visbility property is not set, 
    // otherwise show it 
    which.style.visibility = (which.style.visibility == 'visible' || !which.style.visibility) ? 'hidden' : 'visible'; 
}

来源

2016-04-25 20:01:54

JQuery的切换的伟大工程，对于这一点，看到小提琴：https://jsfiddle.net/uddhf4rw/2/

<p id="myP">This is a p element.</p> 

<button type="button">Hide content of p</button> 

<script> 
    $(document).ready(function() { 
    $("button").click(function() { 
     $("#myP").toggle(); 
    }); 
    }); 

</script>

来源

2016-04-25 20:03:18

的CORRCT属性是

which.style.display

所以

function myFunction() { 
    var which= document.getElementById("myP"); 

    if (which.style.display =="block" || which.style.display =="") 
     which.style.display = "none" 
    else 
     which.style.display = "block" 
}

这个fiddle为例

来源

2016-04-25 20:05:09 rick

首先，不要使用onclick属性。改为使用addEventListener。

整个代码

var paragraph = document.getElementById("myP"), 
    currentState = window.getComputedStyle(paragraph, null).visibility; 
document.querySelector("button").addEventListener("click", function() { 
    paragraph.style.visibility = paragraph.style.visibility === "hidden" || currentState === "hidden" ? "visible" : "hidden"; 
});

还要考虑使用的CSS显示代替可视性。

来源

2016-04-25 20:06:08

最初which.style.visibility的值未设置尝试

function myFunction() { 
     var which= document.getElementById("myP"); 

     if (!which.style.visibility || which.style.visibility=="visible") 
      which.style.visibility = "hidden" 
     else 
      which.style.visibility = "visible" 
    }

或

<p id="myP" style="visibility: visible;">This is a p element.</p>

来源

2016-04-25 20:06:28 42shadow42

如何更改Div的可见性

回答

相关问题