网站模板下载

原生JS实现点击按钮显示div再点击按钮或空白隐藏

作者 2020-07-24 496

JS特效代码:原生JS实现点击按钮显示div再点击按钮或空白隐藏,原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏,JS显示和隐藏div接下来我们使用VisualStudio这个软件来写一个的方法,我们可以使用这种写法写一个小案例来实现一个div里面显示和隐藏的效果。

提示:你可以先修改部分代码再运行。

<!DOCTYPE html>
<html style="font-size: 24px">
<head>
    <title>js点击按钮显示再点击空白地方隐藏</title>
    <style type="text/css">
        #div {
            border: 1px solid red;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
            font-size: 2rem
        }
    </style>
</head>
<body>
    <div id="div">这是div的内容</div>
    <button onclick="show()">点击我</button>
<script type="text/javascript">
    function show (event) {
        //取消冒泡
        let oevent = event || window.event
        if (document.all) {
            oevent.cancelBubble = true
        } else {
            oevent.stopPropagation()
        }
        if (document.getElementById('div').style.display === 'none' || document.getElementById('div').style.display === '') {
            document.getElementById('div').style.display = 'block'
        } else {
            document.getElementById('div').style.display = 'none'
        }
    }
    document.onclick = function () {
        document.getElementById('div').style.display = 'none'
    }
    document.getElementById('div').onclick = function (event) {
        let oevent = event || window.event
        oevent.stopPropagation()
    }
    
</script>
</body>
</html>
分享给朋友 原生JS实现点击按钮显示div再点击按钮或空白隐藏-好哇网

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!
好哇网 » 原生JS实现点击按钮显示div再点击按钮或空白隐藏

发表评论

好哇网,累计帮助1000+用户成功建站,为小微企业提供助力!

立刻开启你的建站之旅

留言咨询

现在加入好哇网,注册一个账号