控制div显示的时候的一个小问题（将display设置为空意思是使用默认值，设置为block才是显示）

最新推荐文章于 2023-03-01 14:58:26 发布

原创最新推荐文章于 2023-03-01 14:58:26 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#控制div显示的时候的一个小问题（将display设置为空意思是使用默

Javascript、JQuery练习专栏收录该内容

69 篇文章

订阅专栏

本文介绍了一种使用JavaScript控制HTML元素显示与隐藏的方法。通过设置元素的display属性为'block'来实现元素的显示，而设置为'none'则使元素隐藏。此技术常用于网页动态效果的实现，如弹窗、菜单的展开与收起等功能。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        #div1 {
        width:300px;
        height:300px;
       background-color:green;
        display:none;
        }
    </style>
    <input type="button" id="btn1" value="显示"/>
    <div id="div1">
    </div>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('btn1').onclick = function () {
                //如果设置display属性为空意思是设置为他的默认值，由于一开始的默认值是不显示，所以设置为空也是不显示，所以设置为block才显示
                document.getElementById('div1').style.display = 'block';
            };
        };
    </script>
</body>
</html>