JavaScript隐藏函数

JavaScript hideshow function

本文关键字：函数 隐藏 JavaScript      更新时间：2023-09-26

你好，我一直试图得到一个隐藏功能，并遇到一个工作良好。对我来说唯一的问题是我希望我的div被隐藏，然后显示onclick，而不是显示然后隐藏。下面是一个示例代码:

   <!DOCTYPE html>
   <html>
   <head>
   <script>
   function hideshow(which){
        if (!document.getElementById)
        return
        if (which.style.display=="none")
            which.style.display="block"
        else
            which.style.display="none"
         }
 </script>
 <style>
  #adiv {
  width: 320px;
  height: 320px;
  background: green;
  }
</style>
</head>
<body>
<a href= "javascript:hideshow(document.getElementById('adiv'));";>clickme!</a>  
<div id="adiv"> </div>

希望这有足够的信息:)

一开始可以用两种常用的方法隐藏div:

(1)隐藏使用CSS

添加display:none到div以隐藏div，无论JS是否启用。你可以这样写:

<div id="adiv" style="display:none"> </div>

(2)使用JS隐藏

如果你不想为没有启用JS的用户隐藏div，那么通过JS隐藏是有用的。有多种方法可以使用自动执行JS来隐藏div。下面是一个简单的方法。 
<body onload="hideshow(document.getElementById('adiv'));">
<a href= "javascript:hideshow(document.getElementById('adiv'));";>clickme!</a>  
<div id="adiv"> </div>

我想隐藏我的div然后显示在click上而不是显示然后隐藏

试着理解你上面的意思，我猜不出你说的是<div>的原始状态。
与此同时，我无法想象你不知道如何实现它!

无论如何，如果这真的是问题，这很简单:将display: none;添加到您的#adiv规则。

顺便说一句，你应该选择符合标准的编码风格，以提高可读性，像这样:

   function hideShow(which){
        if (!document.getElementById) {
            return;
        }
        if (which.style.display == "none") {
            which.style.display = "block";
        } else {
            which.style.display = "none";
        }
    }

最后，您还可以增强它，因此:

   function hideShow(which){
        if (document.getElementById) {
            which.style.display = which.style.display == "none" ?
                "block" : "none";
        }
    }
相关文章：