js实现添加边框

添加边框的基本方法

在JavaScript中，可以通过操作DOM元素的style属性来动态添加边框。以下是几种常见方式：

修改元素的border样式

element.style.border = "2px solid red";

分别设置边框属性

element.style.borderWidth = "1px";
element.style.borderStyle = "dashed";
element.style.borderColor = "#000";

通过classList添加边框样式

定义CSS类：

.border-highlight {
  border: 3px dotted blue;
  border-radius: 5px;
}

通过JavaScript添加类：

element.classList.add("border-highlight");

动态创建带边框的元素

const newDiv = document.createElement("div");
newDiv.style.border = "1px solid green";
newDiv.textContent = "带边框的新元素";
document.body.appendChild(newDiv);

响应事件添加边框

button.addEventListener("click", function() {
  targetElement.style.border = "2px solid orange";
});

注意事项

• 边框样式需遵循CSS规范，常见样式包括solid、dotted、dashed、double等
• 边框宽度建议使用像素单位，颜色支持所有CSS颜色格式
• 添加边框可能影响元素布局，需考虑盒子模型的计算方式
• 对于表格元素，可能需要单独设置border-collapse属性

移除边框的方法

// 方法1：清空边框样式
element.style.border = "";

// 方法2：移除class
element.classList.remove("border-highlight");