如何禁止Google翻译翻译HTML类名

你需要阻止动态生成的HTML类名被翻译，而非阻止元素内文本翻译，现有的notranslate是针对文本的，解决不了属性里的类名翻译问题，给你几个可行的实现方法：

方法1：用data属性暂存类名，JS动态添加 #

翻译工具通常不会解析data-*属性的内容，你可以先把动态类名存到自定义data属性里，再通过JavaScript把它加到元素的class列表中：

<!-- 模板里先存到data-class -->
<div data-bind="attr : { 'data-class': headerLabel() }" class="notranslate"></div>

<!-- 绑定完成后执行JS -->
<script>
document.querySelectorAll('[data-class]').forEach(el => {
  // 把data-class的值添加到class
  el.classList.add(el.dataset.class);
  // 用完移除data属性（可选）
  el.removeAttribute('data-class');
});
</script>

方法2：用框架的CSS绑定替代attr绑定类名 #

以你用的Knockout为例，直接使用css绑定来设置动态类名，翻译工具一般不会解析框架绑定逻辑里的变量内容：

<!-- 单独设置动态类 -->
<div data-bind="css: headerLabel()" class="notranslate"></div>

<!-- 同时结合固定类和动态类 -->
<div data-bind="css: ['notranslate', headerLabel()]"></div>

这种方式更符合Knockout的规范，也能避开翻译工具对属性值的扫描。

方法3：给类名所在元素加notranslate，文本单独放子元素 #

如果必须在attr里拼接类名，你可以给包含动态类名的元素加notranslate，但把需要翻译的文本放到不带notranslate的子元素里，这样类名所在的元素被标记不翻译，文本仍能正常翻译：

<div data-bind="attr : { 'class':'notranslate '+headerLabel()}">
  <span>这里的文本会被正常翻译</span>
</div>

内容的提问来源于stack exchange，提问作者Saravana