首页JavaScript中单击按钮改变盒子形状

JavaScript中单击按钮改变盒子形状

时间: 2024-11-07 17:11:40 浏览: 37

在JavaScript中，你可以通过给按钮添加事件监听器（如`onclick`），当用户点击按钮时触发特定的函数。这个函数通常会操作HTML元素，比如改变一个div元素的CSS样式，从而改变盒子的形状。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .box { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <button id="changeShape">点击改变形状</button> <div class="box" id="myBox"></div> <script> document.getElementById("changeShape").addEventListener("click", function() { var box = document.getElementById("myBox"); if (box.style.transform === "none") { // 如果没有变形 box.style.transform = 'rotate(45deg)'; // 变成旋转45度 } else { // 否则还原到原始形状 box.style.transform = 'none'; } }); </script> </body> </html> ``` 在这个例子中，当你点击按钮时，如果盒子未旋转，它会被旋转45度；再次点击则恢复到初始状态。这里利用了CSS的`transform`属性来改变盒子的形状。

阅读全文