js实现添加边框

添加边框的基本方法

使用JavaScript为DOM元素添加边框可以通过直接修改元素的style属性或操作CSS类实现。

修改style属性

const element = document.getElementById('targetElement');
element.style.border = '2px solid #000';

通过CSS类添加

.border-style {
  border: 1px dashed red;
}

element.classList.add('border-style');

动态边框控制

通过条件判断动态切换边框样式，适用于交互场景。

function toggleBorder(elementId, isActive) {
  const el = document.getElementById(elementId);
  el.style.border = isActive ? '3px solid blue' : 'none';
}

边框动画效果

结合CSS transitions实现平滑的边框变化效果。

.animated-border {
  transition: border 0.3s ease;
}

element.classList.add('animated-border');
element.style.borderWidth = '4px';

复合边框设置

精确控制边框各边样式，支持独立配置。

element.style.borderTop = '1px solid #ccc';
element.style.borderLeft = '2px dotted green';
element.style.borderRight = 'none';
element.style.borderBottom = '4px double #333';

响应式边框调整

根据窗口尺寸动态计算边框宽度。

window.addEventListener('resize', () => {
  const thickness = window.innerWidth > 768 ? '3px' : '1px';
  document.querySelectorAll('.responsive-border').forEach(el => {
    el.style.borderWidth = thickness;
  });
});