一个按钮同时有两个作用、显示和隐藏

最新推荐文章于 2023-11-07 17:52:00 发布

幼儿崽

最新推荐文章于 2023-11-07 17:52:00 发布

阅读量243

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_73917034/article/details/129066892

版权

静态效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background: hotpink;
        }
    </style>
</head>

<body>
    <button>隐藏</button>
    <div></div>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        var div = document.getElementsByTagName('div')[0];
        // var num = 0;
        var flag = true;
        btn.onclick = function () {
            // num++;
            // if (num % 2 == 1) {
                if (flag) {
                    div.style.display = 'none';
                    btn.innerHTML = '显示'
                    flag = false;
                } else {
                    div.style.display = 'block'
                    btn.innerHTML = '隐藏'
                    flag = true;
                }
            }
    </script>
</body>

</html>