本文介绍如何使用 javascript 批量检测多个 `.text-container` 元素中子 `` 文本是否溢出，并自动为其添加 `animate` 类实现滚动动画，避免重复编写单个元素的判断逻辑。
在实际开发中，当页面包含多个标题或长名称（如动漫名、商品名等）需要响应式滚动展示时，逐个为每个元素编写独立的 DOM 查询和条件判断不仅冗余，还难以维护。正确的做法是批量选取、统一处理。
你原始代码的问题在于：
- 使用了 #one 和 #onespan 这样的唯一 ID 选择器，但 HTML 中并未给 <span> 设置 id="onespan"，导致 document.querySelector("#onespan") 返回 null；
- 即使修复 ID，硬编码单个元素也无法扩展到 16+ 个容器。
✅ 推荐解决方案是使用 document.querySelectorAll() 获取所有匹配节点，再通过循环统一判断：
// 批量获取所有文本容器和对应的 span 元素
const containers = document.querySelectorAll(".text-container");
const texts = document.querySelectorAll(".text-container span");
// 确保数量一致，避免索引越界
const count = Math.min(containers.length, texts.length);
for (let i = 0; i < count; i++) {
const container = containers[i];
const text = texts[i];
// 检查文本宽度是否超出容器宽度（需确保元素已渲染且样式生效）
if (container.clientWidth < text.scrollWidth) {
text.classList.add("animate");
}
}? 关键优化说明：
- 使用 text.scrollWidth 替代 text.clientWidth：clientWidth 包含 padding 且受 CSS overflow 影响，而 scrollWidth 真实反映内容总宽度（含溢出部分），更适合溢出检测；
- 添加 Math.min() 防御性检查，避免因 HTML 结构不一致（如某个容器缺失 <span>）导致脚本报错；
- 选择器 .text-container span 更精准，避免误选其他位置的 <span>。
? 补充建议：
- 动画类 .animate 需配合 CSS 实现无缝滚动（例如 white-space: nowrap; animation: scrollText 15s linear infinite;）；
- 若内容动态加载（如 AJAX 或 Vue/React 渲染），请确保上述脚本在 DOM 完全挂载后执行（可放在 DOMContentLoaded 事件或组件 mounted 钩子中）；
- 移动端需注意 scrollWidth 在部分 WebView 中可能有兼容性问题，可增加降级逻辑（如 fallback 到字符串长度粗略判断）。
通过这一模式，你只需在 HTML 中统一添加结构，无需修改 JS 即可支持任意数量的文本容器——真正实现“写一次，复用多次”。
