展开收起

最新推荐文章于 2024-07-12 16:13:45 发布

吴机智

最新推荐文章于 2024-07-12 16:13:45 发布

阅读量47

点赞数

文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108502738

版权

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 300px;height: 100px;
        background: pink;
    }
</style>
<body>
    <div></div>
    <script>
        // 效果描述： 点击div, 高度变高, 在点击一次，高度变回
        var div = document.getElementsByTagName('div')[0];
        // 不知道当前是什么状态的时候, 创建一个变量存储当前是什么状态
        var flag = true; // flag为true的时候高度是100
        div.onclick = function(){
            if(flag){
                div.style.height = '300px';
                flag = false;
            } else {
                div.style.height = '100px';
                flag = true;
            }
        }
    </script>
</body>
</html>