应使用语义化标签包裹库存数字并配合data-threshold属性传递阈值，通过textcontent更新数值、css变量管理颜色、图标+aria-label增强可访问性，避免内联样式和innerhtml拼接，确保可维护性与多端兼容性。
库存数字用 <span></span> 包裹再加 class 控制样式
直接给数字加 style="color:red" 看似快，但后期改颜色、加动画、适配暗色模式时全得挨个找 style 改，维护成本高。用语义化标签 + class 是更可持续的做法。
常见错误是把整个“仅剩3件”写死在 HTML 里，导致库存变化时要 JS 全量替换 innerHTML，容易误删事件监听或破坏 DOM 结构。
- 库存数字必须单独包裹，比如：
<span class="stock-alert">3</span> - “仅剩”和“件”用普通文本，不参与动态更新，避免 JS 拼接字符串出错
- class 名别用
red或big这类纯样式名，改用stock-low这种带业务含义的名，方便后续加 hover 效果或屏幕阅读器提示
判断“紧张”的阈值别硬编码在 HTML 里
前端写死“小于5就标红”，后端改了库存策略（比如大促期间改成小于10就算紧张），页面就不同步了。阈值必须由后端通过数据属性传下来。
使用场景：商品详情页、购物车行、列表卡片 —— 只要显示单个商品库存的地方都适用。
- 后端渲染时写入：
<span class="stock-alert" data-threshold="5">3</span> - JS 读取：
el.dataset.threshold，注意它返回的是字符串，要parseInt() - 不要用
data-*="true"这类布尔标记，阈值可能变，预留扩展性
textContent 更新数字比 innerHTML 更安全
有人用 innerHTML = '仅剩' + num + '件'，一旦 num 来自用户输入或接口未过滤，就有 XSS 风险。哪怕现在没风险，也埋下隐患。
性能上差异不大，但可维护性差很多：改文案要翻 JS，改样式要翻 CSS，改逻辑要翻 HTML —— 三处耦合。
- 只更新数字部分：
el.textContent = num - 文案“仅剩”和“件”保留在 HTML 中，改文案不用动 JS
- 如果需要动态显示/隐藏整行提示（比如库存为0时显示“缺货”），用
el.parentElement.classList.toggle('hidden', num === 0)
红色不是唯一方案，要考虑色觉障碍和暗色模式
纯靠红色区分“紧张”，对红绿色盲用户无效；在暗色主题下，红色可能不够醒目甚至看不清。光改颜色还不够。
兼容性影响：iOS Safari 对某些 CSS 变量支持滞后，prefers-color-scheme 在旧安卓 WebView 里也不稳定。
- 至少加一个图标：
<span class="stock-alert" aria-label="库存紧张，仅剩3件">⚠️</span> - CSS 里用
border-left: 3px solid var(--alert-color)比纯文字颜色更易识别 - 避免用
color: #f00，改用color: var(--alert-text)，配合 :root 和 @media (prefers-color-scheme: dark) 统一管理
class 就完事。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
