如何更改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的可見性

回答

相關問題