一、html结构
首先，我们需要在html中创建一个按钮和一个要隐藏或显示的div：
<button id="toggle-btn">点击切换</button><div id="toggle-div"></div>
二、css样式
我们可以为按钮和div添加css样式，使其更加美观和易于操作：
<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button><div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>
三、javascript代码
接下来，我们需要使用javascript代码来实现隐藏和显示div的功能。我们可以使用事件监听器来监听按钮的点击事件，并使用css样式来控制div的显示和隐藏。
首先，我们需要定义一个变量来表示div的状态，初始状态为显示，定义为true：
let isshown = true;
然后，我们可使用queryselector方法来获取按钮和要隐藏或显示的div的dom元素：
const togglebtn = document.queryselector('#toggle-btn');const togglediv = document.queryselector('#toggle-div');
接下来，我们需要绑定点击事件，即当用户点击按钮时，执行以下操作：
togglebtn.addeventlistener('click', function() { if(isshown) { togglediv.style.display = 'none'; isshown = false; } else { togglediv.style.display = 'block'; isshown = true; }});
在这段代码中，我们判断div的状态是否为显示状态，如果是，则将其设置为隐藏状态，同时更新状态变量，反之亦然。
完整代码：
<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button><div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div><script> let isshown = true; const togglebtn = document.queryselector('#toggle-btn'); const togglediv = document.queryselector('#toggle-div'); togglebtn.addeventlistener('click', function() { if(isshown) { togglediv.style.display = 'none'; isshown = false; } else { togglediv.style.display = 'block'; isshown = true; } });</script>
四、优化
上述代码可以实现隐藏和显示div的功能，但代码存在一些冗余，可以进行优化。
首先，我们可以使用toggle方法来切换div的显示和隐藏状态：
togglebtn.addeventlistener('click', function() { togglediv.style.display = isshown ? 'none' : 'block'; isshown = !isshown;});
其次，我们可以将样式定义移至css中，以提高代码的可维护性：
#toggle-btn { background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;}#toggle-div { background-color: #f5f5f5; padding: 10px;}
最终优化后的完整代码：
<button id="toggle-btn">点击切换</button><div id="toggle-div">这是要隐藏或显示的div</div><style> #toggle-btn { background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px; } #toggle-div { background-color: #f5f5f5; padding: 10px; }</style><script> let isshown = true; const togglebtn = document.queryselector('#toggle-btn'); const togglediv = document.queryselector('#toggle-div'); togglebtn.addeventlistener('click', function() { togglediv.style.display = isshown ? 'none' : 'block'; isshown = !isshown; });</script>
五、总结
使用javascript实现隐藏和显示元素功能是web开发中很常见的一种场景。通过事件监听器、操作css样式和控制元素状态能够很好地实现这一功能，提高用户交互体验。优化代码可以进一步提高代码的可读性和可维护性，提高开发效率。
以上就是如何使用javascript来实现div隐藏显示的详细内容。