用js代码实现点击按钮对div框架隐藏和显示

最新推荐文章于 2022-12-01 17:25:18 发布

psjasf1314

最新推荐文章于 2022-12-01 17:25:18 发布

阅读量1.7k

点赞数 1

文章标签： javascript html5

本文链接：https://blog.csdn.net/psjasf1314/article/details/124104332

版权

内容描述：用js代码实现点击按钮对div框架隐藏和显示，点击一次展开div,再次点击隐藏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {
            width: 100px;
            height: 400px;
            background-color: red;
            display: none;
        }
    </style>
    <script>
        function f() {
            var v1 = document.getElementById("div1");
            if (v1.style.display == "none") {
                v1.style.display = "block";
            } else {
                v1.style.display = "none";
            }
        }
    </script>
</head>
<body>
<input type="button" value="显示隐藏" onclick="f()">
<div id="div1">

</div>
</body>
</html>

效果图：

初始页

点击一次

点击两次

psjasf1314

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
用js代码实现点击按钮对div框架隐藏和显示

内容描述：用js代码实现点击按钮对div框架隐藏和显示，点击一次展开div,再次点击隐藏代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div1 { width: 100px; heig
复制链接

扫一扫