js实现添加边框
添加边框的基本方法
在JavaScript中为元素添加边框可以通过直接操作DOM元素的style属性实现。以下是一个简单示例：
const element = document.getElementById('targetElement');
element.style.border = '2px solid red';动态边框样式控制
通过JavaScript可以动态控制边框的多种属性：
// 设置边框宽度
element.style.borderWidth = '3px';
// 设置边框样式
element.style.borderStyle = 'dashed';
// 设置边框颜色
element.style.borderColor = '#00ff00';单独设置各边边框
可以分别设置四个方向的边框：
element.style.borderTop = '1px solid black';
element.style.borderRight = '2px dotted blue';
element.style.borderBottom = '3px double green';
element.style.borderLeft = '4px ridge purple';使用classList添加边框样式
更推荐的方式是通过添加/移除CSS类来实现：
// CSS中定义
.border-highlight {
border: 2px solid gold;
box-shadow: 0 0 8px rgba(255,215,0,0.6);
}
// JavaScript中应用
element.classList.add('border-highlight');响应式边框效果
实现鼠标悬停时的边框动画效果：
element.addEventListener('mouseenter', () => {
element.style.transition = 'border 0.3s ease';
element.style.border = '3px solid #ff5722';
});
element.addEventListener('mouseleave', () => {
element.style.border = '1px solid #ddd';
});边框半径控制
同时设置边框圆角：
element.style.borderRadius = '10px';
element.style.border = '2px solid #3f51b5';注意事项
修改内联样式会覆盖外部CSS样式表规则。对于复杂样式，优先考虑通过切换CSS类名的方式实现。
批量修改多个元素的边框时，建议使用querySelectorAll获取元素集合，然后遍历处理：
document.querySelectorAll('.border-items').forEach(item => {
item.style.border = '1px solid #eee';
});
