本文介绍如何防止 Google 翻译工具（如 Chrome 内置翻译）篡改 HTML 元素的 class 属性值，重点解决动态生成 class 名称时被错误翻译的问题，并提供全局与局部两种可靠方案。
本文介绍如何防止 google 翻译工具（如 chrome 内置翻译）篡改 html 元素的 `class` 属性值，重点解决动态生成 class 名称时被错误翻译的问题，并提供全局与局部两种可靠方案。
Google 翻译（尤其是 Chrome 浏览器内置的页面翻译功能）在处理网页时，默认会对页面中所有可识别的文本内容进行检测与翻译，包括 HTML 元素的属性值——这可能导致动态生成的 class 名（如 "notranslate header-active" 或基于 ViewModel 计算出的 headerLabel() 结果）被误判为待翻译文本，进而被替换为对应语言的词汇（例如 header-active → cabecera-activa），破坏 CSS 选择器匹配逻辑，引发样式丢失或交互异常。
⚠️ 需要明确：... 中的 notranslate 是作用于元素内文本内容的，对 class 属性本身无效；同理，translate="no" 若加在
上，仅阻止该元素内部文本被翻译，仍无法保护其 class 属性值不被解析和修改。
✅ 正确且最简方案：在根 标签上声明 translate="no"
这是 W3C 规范支持的标准属性，明确指示整个文档不应被自动翻译，从而从根本上避免 class、id、data-*、aria-* 等所有属性值被 Google 翻译引擎干预：
<!DOCTYPE html>
<html lang="en" translate="no">
<head>
<meta charset="UTF-8">
<title>My App</title>
</head>
<body>
<!-- 动态 class 将保持原样，不会被翻译 -->
<div data-bind="attr: { 'class': 'notranslate ' + headerLabel() }">
<!-- 渲染结果示例（无篡改）： -->
<!-- <div class="notranslate header-dashboard"> -->
</div>
</body>
</html>? 补充说明与最佳实践：
- ✅ translate="no" 支持所有主流浏览器（Chrome、Edge、Firefox、Safari），兼容性良好；
- ✅ 该属性具有继承性：设置在 上即覆盖全页面，无需逐个元素添加；
- ⚠️ 不推荐使用 translate="no" 仅包裹 或局部容器——因 Google 翻译可能仍会扫描并“推测”属性值语义，导致 class 被误处理；
- ? 若页面需部分区域支持翻译（如用户生成的内容区块），可在 基础上，对特定容器显式启用：
... ，此时该容器内文本可译，但其 class 属性依然受根级 translate="no" 保护（因属性值不属于“可翻译文本”范畴）； - ? 进阶防护：对于高度敏感的 class 命名（如 BEM 风格的 c-button--primary），建议结合 data-no-translate 自定义属性 + CSS 逻辑规避，但 html[translate="no"] 已满足绝大多数工程场景。
总结：要可靠禁用 Google 翻译对 HTML class 名称的干扰，请始终将 translate="no" 设置在 标签层级。它轻量、标准、有效，是前端国际化开发中保障 DOM 结构稳定性的关键一环。
立即学习“前端免费学习笔记（深入）”；
