用 class 动态控制预警色最稳：剩余≥7天加.warn-yellow，3–6天加.warn-orange，≤2天加.warn-red；js用classlist.replace()切换，统一转毫秒计算避免时区误差，并配role="alert"和sr-only文本保障无障碍。
怎么用 class 动态控制 HTML 元素的黄/橙/红预警色
靠写死三个 class（.warn-yellow、.warn-orange、.warn-red）再用 JS 根据剩余天数切换，最稳。别用内联 style 写颜色——维护时改一处要翻十处，而且没法复用 hover、transition 等样式。
常见错误是直接拼接字符串设 style.color，结果背景色没同步、border 没变、无障碍属性（如 aria-live）全丢了。预警不是改个颜色的事，是整套视觉+语义信号。
- 剩余 ≥ 7 天 →
class="warn-yellow"（温和提示） - 剩余 3–6 天 →
class="warn-orange"（需关注） - 剩余 ≤ 2 天 →
class="warn-red"（紧急）
示例 CSS 只需三组规则，不依赖预处理器：
.warn-yellow { color: #856404; background-color: #fff3cd; border-color: #ffeaa7; }
.warn-orange { color: #ffffff; background-color: #fd7e14; border-color: #fd7e14; }
.warn-red { color: #fff; background-color: #dc3545; border-color: #dc3545; }
JS 判断截止日并更新 class 的关键逻辑
核心就一行：element.classList.replace() 替换旧预警 class，比 remove()+add() 更安全——避免中间状态漏掉 class 或重复添加。但前提是得先有初始 class，否则 replace() 不生效。
容易踩的坑：用 Date.now() 直接减毫秒数，却忽略时区。后端传来的截止时间如果是 UTC（比如 "2024-06-15T16:00:00Z"），前端用本地 new Date() 对比会偏移 8 小时，导致预警提前或延后一天。
- 统一转为毫秒比较：
new Date(deadline).getTime() - new Date().getTime() - 算出剩余天数用
Math.ceil(msDiff / (1000 * 60 * 60 * 24))，别用floor——剩 0.9 天也该标红 - 每次更新前先清理旧预警 class：
element.classList.remove("warn-yellow", "warn-orange", "warn-red")
为什么不能只靠 CSS 自定义属性（CSS variables）做分级
可以设 --warn-level: 1，再用 CSS @supports 或 JS 配合，但实际项目里基本不用。原因很实在：浏览器不支持按变量值自动切样式，你还是得用 JS 判定 level 后手动加 class；而一旦加了 class，CSS 变量反而多一层间接，调试时看 computed style 更难定位颜色来源。
另一个现实约束：需要适配旧版 IE（哪怕只是内部系统）。IE 不支持 CSS 变量，但支持 class 切换——所以直接上 class 是兼容性兜底最省心的方案。
- 想用 CSS 变量？行，但仅限于同一预警色下的微调（如
--warn-border-width: 2px） - 分级逻辑必须落在 JS 或服务端模板里，CSS 只负责“呈现”，不负责“决策”
- 如果项目已用 Tailwind，别硬套
bg-yellow-100这类工具类——它们没语义，无法被 screen reader 识别预警等级
无障碍和可访问性不能只靠颜色
纯靠黄/橙/红区分预警，对色觉障碍用户（尤其是红绿色盲）等于没提示。必须叠加其他信号：图标、文字标签、字体粗细，以及最重要的 aria-live 和 role="alert"。
典型错误是加了 aria-label="警告：还剩2天" 却不设 aria-live="polite"，导致屏幕阅读器不会主动播报更新。更糟的是把预警文本藏在 display: none 里——它既不显示也不朗读。
- 给预警容器加
role="alert"，首次渲染即触发朗读 - 动态更新时，确保文本节点内容变更（不要只改 class），或手动调
element.setAttribute("aria-live", "assertive") - 加一个不可见但可读的辅助文本：
<span class="sr-only">紧急：项目截止仅剩1天</span>
真正难的不是写出三色样式，而是让颜色变化的同时，所有用户——无论怎么看屏幕——都收到同等强度的信号。这点常被跳过，直到上线后被 QA 或合规团队打回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
