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

内容描述:用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>

效果图:

初始页

点击一次

 

点击两次

 

猜你喜欢

转载自blog.csdn.net/psjasf1314/article/details/124104332