js点击div显示消失的例子

JS控制DIV显示隐藏

最新推荐文章于 2023-05-27 13:00:06 发布

原创最新推荐文章于 2023-05-27 13:00:06 发布 · 4.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript控制DIV元素显示与隐藏的方法。通过一个按钮的点击事件，利用非运算符和三目运算符切换DIV的display属性，实现元素的动态显示与隐藏效果。

思路:点击按钮，让div显示，再次点击，消失 .这里主要控制div样式的显示隐藏。我们自定义一个a 让它来控制显示隐藏
这里用的非运算符，三目运算符
html

  <input type="button" id="btn" value='点击'/>
    <div id="box"></div>

  var oInput=document.getElementById('btn');
        var box=document.getElementById('box');
        console.log(oInput);
        console.log(box);
        var a=true;
        oInput.onclick=function(){
             a=!a;
             a?box.style.display="block":box.style.display="none";
        }