如何在事件触发时为元素添加并移除边框（附示例）

要实现点击p元素后给下方div添加边框并1秒后自动移除的效果，推荐用CSS类结合JavaScript事件监听的方式，既清晰又便于维护：

完整代码示例 #

HTML

给目标div添加明确的类名，方便JavaScript定位选择：

<p class="clickedelement">
  点击我，下方的div会出现边框，1秒后自动消失
</p>
<div class="target-div"></div>

CSS

定义目标div的基础样式，以及用于高亮的边框类：

.target-div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
  /* 初始添加透明边框，避免添加高亮边框时布局跳动 */
  border: 2px solid transparent;
  /* 可选：添加过渡动画，让边框变化更平滑 */
  transition: border-color 0.2s ease;
}

.highlight {
  border-color: #e74c3c; /* 用显眼的颜色吸引注意力 */
  border-width: 3px;
}

JavaScript

监听p元素的点击事件，添加高亮类后定时移除：

document.querySelector(".clickedelement").addEventListener("click", function() {
  const targetDiv = document.querySelector(".target-div");
  // 给div添加高亮边框类
  targetDiv.classList.add("highlight");
  // 1000毫秒（1秒）后移除高亮类
  setTimeout(() => {
    targetDiv.classList.remove("highlight");
  }, 1000);
});

额外说明 #

• 用CSS类管理样式比直接修改元素style属性更灵活，后续要调整边框样式只需要修改CSS即可，无需改动JS代码。
• 初始添加透明边框是为了防止边框出现时元素尺寸变化，避免页面布局跳动，提升用户体验。
• 过渡动画是可选的，可以让边框的出现和消失更自然，不需要的话可以删除transition属性。

内容的提问来源于stack exchange，提问作者Vinith Almeida