首页javascript点击按钮将方形盒子修改为圆形盒子，再点击按钮变回方形

javascript点击按钮将方形盒子修改为圆形盒子，再点击按钮变回方形

时间: 2024-11-22 10:40:10 浏览: 23

在JavaScript中，你可以通过添加事件监听器和CSS样式来实现这个功能。首先，你需要创建一个方形的HTML元素作为盒子，并为其添加一个点击事件。然后，在事件处理函数中，改变盒子的CSS样式使其变为圆形，再次点击时恢复原来的方形样式。下面是一个简单的示例，假设你有一个id为`squareBox`的div元素： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .square { width: 100px; height: 100px; background-color: red; border-radius: 0; /* 初始状态是方形 */ } .circle { width: 100px; height: 100px; background-color: red; border-radius: 50%; /* 圆形 */ } </style> <script> document.getElementById('squareButton').addEventListener('click', function() { var box = document.getElementById('squareBox'); if (box.classList.contains('circle')) { box.classList.remove('circle'); box.style.borderRadius = '0'; // 回到方形 } else { box.classList.add('circle'); box.style.borderRadius = '50%'; // 变成圆形 } }); </script> </head> <body> <button id="squareButton">切换形状</button> <div id="squareBox" class="square"></div> </body> </html> ``` 在这个例子中，当你点击“切换形状”按钮时，如果盒子已经是圆形，就会去掉`.circle`类并设置`border-radius`为0；反之则添加`.circle`类并将`border-radius`设为50%，使盒子变成圆形。

阅读全文