JavaScript 实现圆角矩形设置

在网页设计与开发中，圆角矩形常常能为界面增添柔和与美观的效果。而借助 JavaScript，我们可以灵活地对圆角矩形进行各种设置。

我们需要了解基本的原理。在 CSS 中，通过 border - radius 属性就能简单创建一个圆角矩形。但 JavaScript 可以让这一过程变得更加动态和交互化。

在 HTML 中，我们先创建一个简单的元素，比如一个 <div> 作为我们要设置成圆角矩形的对象。例如：<div id="roundedRect"></div>。

然后，进入 JavaScript 的世界。我们可以使用 document.getElementById 方法来获取这个元素。如 const rect = document.getElementById('roundedRect');。

接下来就是设置圆角的关键部分。如果想简单地设置一个固定的圆角半径，我们可以这样做：rect.style.borderRadius = '15px';，这样，这个 <div> 元素就变成了一个圆角半径为 15 像素的圆角矩形。

但 JavaScript 的强大之处远不止于此。我们可以通过变量和函数来实现更复杂的设置。比如，创建一个函数根据用户的输入来改变圆角半径：

function setRadius(radius) {
    const rect = document.getElementById('roundedRect');
    rect.style.borderRadius = radius + 'px';
}

在 HTML 中添加一个输入框和按钮，让用户输入想要的圆角半径值，点击按钮就能触发函数：

<input type="number" id="radiusInput">
<button onclick="setRadius(parseInt(document.getElementById('radiusInput').value))">设置圆角半径</button>

JavaScript 还能结合事件监听器实现动态交互。例如，当鼠标悬停在圆角矩形上时改变其圆角半径：

const rect = document.getElementById('roundedRect');
rect.addEventListener('mouseover', function() {
    this.style.borderRadius = '30px';
});
rect.addEventListener('mouseout', function() {
    this.style.borderRadius = '15px';
});

通过 JavaScript 实现圆角矩形设置，不仅丰富了网页的视觉效果，还增强了用户与页面的交互性。无论是简单的固定设置，还是复杂的动态交互，JavaScript 都能提供强大的支持，帮助开发者打造出更具吸引力和实用性的网页界面。