通过HTML事件动态调整矩形尺寸
如何通过**HTML事件**动态调整矩形的**大小**
在网页设计中，用户交互往往需要调整特定形状的尺寸，以下为实现此功能的简单步骤：
1. 创建HTML矩形
通过定义一个具有固定**宽度**和**高度**的`div`元素作为矩形。
2. 使用事件监听器响应用户输入
设置**JavaScript**代码以监听HTML事件，例如`oninput`或`onclick`，使矩形尺寸随用户操作动态变化：
document.getElementById('resizeButton').addEventListener('click', function() {
const rectangle = document.getElementById('rectangle');
rectangle.style.width = '150px';
rectangle.style.height = '150px';
});在上述代码中，点击按钮触发事件，动态修改矩形的大小。
3. 使用CSS过渡效果
为调整尺寸添加**过渡效果**，让动画更加平滑：
#rectangle {
transition: width 0.5s, height 0.5s;
}通过增加过渡效果，让矩形尺寸的改变显得更为流畅自然。
文件大小：495B
评论区