如何切換Javascript中html元素的可見性？

我想知道是否有人可以找出爲什麼我的功能無法正常工作。我試圖實現的是當一個按鈕被點擊時它會顯示文本，當它再次被點擊時它會隱藏它等等。如何切換Javascript中html元素的可見性？

function hideshow(){ 
    var showhide=document.getElementById('text'); 
    if(showhide.style.display="none") 
    { 
     showhide.style.display="block"; 
    } 
    else{ 
     showhide.style.display="none"; 
    } 
}

到目前爲止，我得到它顯示我的文字，當我點擊了一次，但一旦我再次點擊它，它具有對文本沒有影響。

來源

2012-07-10 user1512677

+10

'='是賦值運算符...使用'== '如果你想比較。現在，您在每次點擊開始時都會隱藏它，然後再次顯示。總是。 – TheZ 2012-07-10 15:44:05

甚至更好，嘗試使用'==='來比較。首先了解它：http://stackoverflow.com/questions/3735939/jslint-expected-and-instead-saw – jfrej 2012-07-10 15:56:24

function hideShow() { 
    el.style.display != "none" ? "none" : "block"; 
}

來源

2012-07-10 15:47:51 Tom

爲什麼我的文字在我的第一次點擊中不顯示？我的文字設置爲onClick =「hideshow（）;」但是，它只能在我第二次點擊時運行。我的文本的CSS有顯示：沒有，如果有幫助。 – user1512677 2012-07-12 15:43:33

我仍然需要雙擊才能運行。別擔心，我會在網上搜索它。 – user1512677 2012-07-12 16:00:17

您應該在if陳述中使用===。 =是賦值運算符：

function hideshow(){ 
    var showhide=document.getElementById('text'); 
    if(showhide.style.display==="none") 
    { 
     showhide.style.display="block"; 
    } 
    else{ 
     showhide.style.display="none"; 
    } 
}

或者：

function hideshow(){ 
    var showhide=document.getElementById('text'); 

    showhide.style.display = showhide.style.display === "none" ? 
     "block" : 
     "none"; 
}

來源

2012-07-10 15:46:17

更改顯示值後，你不需要'返回false'嗎？ – starbeamrainbowlabs 2012-07-10 15:48:11

我認爲應該是：

function hideshow(){ 
    var showhide = document.getElementById('text'); 
    if (showhide.style.display == "none") 
    { 
     showhide.style.display = "block"; 
    } 
    else{ 
     showhide.style.display = "none"; 
    } 
}

所以，與其使用 '==' '='比較時。 '='運算符分配一個值。在JavaScript中還有'==='運算符。不同之處在於'=='會投出值，而'==='會嚴格比較。

例如：

0 == false; // will return true 
0 === false; // will not

所以，你也可以使用

if (showhide.style.display === "none")

你可以閱讀更多有關運營商here。

來源

2012-07-10 15:48:47 Peter

確實如此，現在改變它。 – Peter 2012-07-11 07:05:43

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript"> 
     function hideshow() { 
      var showhide=document.getElementById('text'); 
      if(showhide.style.visibility=="hidden") 
      { 
       showhide.style.visibility="visible"; 
      } 
      else{ 
       showhide.style.visibility="hidden"; 
      } 
     } 
    </script> 
</head> 
<body> 
    <div id="text">Text</div> 
    <button onclick="hideshow()">hideshow</button> 
</body> 
</html>

來源

2012-07-10 15:55:44

您應該使用比較==運營商，而不是使用=運營商分配的值。

嘗試：

function hideshow() { 
    var showhide = document.getElementById('text').style; 
    (showhide.display = showhide.display == "none" ? "block" : "none") 
}

您可以分配和使用一個語句比較：

(showhide.display = showhide.display == "none" ? "block" : "none") 
        ^assign   ^comparison

演示：http://jsfiddle.net/7Eaf2/

來源

2012-07-10 16:01:02 RobB

如何切換Javascript中html元素的可見性？

回答

相關問題