欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS——点击事件(变大变小)

程序员文章站 2024-03-25 12:20:46
...

效果图:
未点击:
JS——点击事件(变大变小)
点击按钮1:
JS——点击事件(变大变小)
点击按钮2:
JS——点击事件(变大变小)
实现代码:

<body>
    <button id="bnt1">按钮1</button>
    <button id="bnt2">按钮2</button>
    <div id="box"></div>

    <script>
        var btn1 = document.getElementById('bnt1');
        var btn2 = document.getElementById('bnt2');
        var box = document.getElementById('box');

        function change1 (){
              //box.style.width = '150px';
              //box.style.height = '150px';
              box.style.cssText = 'width:150px ; height:150px';

        }

        function change2 (){
               box.style.cssText = 'width:50px ; height:50px';

        }

        btn1.onclick = change1;
        btn2.onclick = change2;
        
    </script>
</body>
相关标签: js javascript