点击更多按钮,出现div,再次点击,div消失

最新推荐文章于 2022-04-11 17:23:51 发布

pinkowonote

最新推荐文章于 2022-04-11 17:23:51 发布

阅读量968

点赞数 1

分类专栏： Javascript

本文链接：https://blog.csdn.net/pinkowonote/article/details/107680014

版权

Javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!-- 点击更多按钮,出现div,再次点击,div消失
1. 获取button按钮和div
2. div首先时display:none
3. 给button添加onclick事件
4. 判断:
if(div是display:none){
    点击button之后:
    div是display:block
} 
else{
    点击button之后:
    div是display:none
}-->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #hiddenBox {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var omoreBtn = document.getElementById("moreBtn");
            var ohiddenBox = document.getElementById("hiddenBox");
            

            omoreBtn.onclick = function () {
                // var Box_display = ohiddenBox.style.display;
                // console.log(Box_display);
                // 不能打印出,不能获取到display的值
                // 样式必须直接写在元素行内样式才能通过div.style.display直接获取属性值
                // 定义在css中的样式不能通过div.style.display这种方式获取。

                //但这里发现可以直接进行比较和赋值(赋值给行内样式)
                // console.log(ohiddenBox.style.display == "block"); ————> false（此时css样式表里是display：block）
                if (ohiddenBox.style.display == "block") {
                    ohiddenBox.style.display = "none";
                }
                else {
                    ohiddenBox.style.display = "block";
                }
            }
        }
    </script>
</head>

<body>
    <button id="moreBtn">更多</button>
    <div id="hiddenBox">hhhhhhh</div>
</body>

</html>