使用JS修改HTML中h1标签内容时CSS样式丢失问题

你的问题根源是修改的目标元素错误：你当前的JS代码直接替换了currentContact这个div的全部内容，把里面的<h1>标签一并删除了，而原CSS样式是作用在h1标签上的，自然样式失效。

正确解决方案 #

直接定位到div内部的h1元素，修改它的文本内容：

document.querySelector('#currentContact h1').innerText = state.translate('test');

为什么之前的方法无效？ #

原HTML结构是div > h1，CSS样式应该是针对h1或.class_Name h1定义的。当你执行document.getElementById('currentContact').innerText = ...时，div内部的结构会被完全替换成纯文本，变成：

<div class="class_Name" id="currentContact">翻译后的test</div>

没有了h1标签，对应的样式自然无法生效。

替代方案（不推荐） #

如果非要修改外层div的内容，需要保留h1标签结构（存在XSS风险，仅当state.translate()返回内容可信时使用）：

document.getElementById('currentContact').innerHTML = `<h1>${state.translate('test')}</h1>`;

关于你尝试的排查措施 #

• 将div移到<head>标签内是错误操作：<head>仅用于存放页面元数据，不能放置div这类内容元素，会导致页面渲染异常。
• 切换innerHTML/textContent/innerText方法无法解决问题，因为核心问题是修改的目标元素不对，不是文本设置方法的问题。

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