如何切换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元素的可见性？

回答

相关问题