最清晰可维护的方式是通过预设CSS类名（如.active、.error）控制边框颜色，配合transition实现平滑变化，用classList切换类名响应状态，并优先利用:focus/:hover/:disabled等伪类减少JS干预。
直接通过状态类（比如 .active、.hover、.disabled）控制边框颜色，是最清晰、可维护性最强的方式。关键在于：**不要用 JS 动态改 style，而是切换预设的 CSS 类名**。
定义不同状态对应的边框颜色
在 CSS 中预先写好各状态下的边框样式，例如：
.input-field {
border: 2px solid #ccc;
transition: border-color 0.2s ease;
}
.input-field.active {
border-color: #007bff;
}
.input-field:focus {
border-color: #28a745;
}
.input-field.error {
border-color: #dc3545;
}
.input-field.disabled {
border-color: #6c757d;
background-color: #f8f9fa;
}
注意加上 transition 让颜色变化更平滑。
用 JS 切换类名来响应状态
根据交互或数据状态，用 classList.add() / remove() / toggle() 控制类名：
立即学习“前端免费学习笔记（深入）”；
- 点击激活时：
el.classList.add('active') - 失去焦点且有错误时：
el.classList.replace('focus', 'error') -
表单提交失败后加 error 类：
inputEl.classList.add('error') - 禁用时：
btnEl.classList.add('disabled')，同时设置btnEl.disabled = true
配合伪类实现自动反馈（无需 JS）
部分状态可直接用 CSS 伪类，减少 JS 干预：
-
:focus—— 获取焦点时变色（适用于 input、button） -
:hover—— 鼠标悬停（注意移动端兼容性） -
:disabled—— 浏览器自动识别 disabled 属性 -
:valid/:invalid—— 结合required或正则验证实时响应
例如：input:invalid { border-color: #dc3545; }，配合 oninput 触发原生校验即可生效。
避免内联样式干扰
如果元素已有 style="border: ..."，会覆盖 CSS 类中的 border-color。解决方法：
- 移除内联
border或border-color，只保留宽度/样式（如border: 2px solid;），让 color 由 class 控制 - 或用
!important（不推荐，仅临时兜底） - 更稳妥：统一用 class 管理所有边框属性，包括 width、style、color
