为何JS函数中document.write输出无法应用CSS类样式？如何解决？

问题原因 #

你遇到的问题核心在于页面加载完成后调用document.write()的行为。当页面初始加载时，第一个document.write()能正常工作，因为它是在页面构建过程中执行的，对应的<style>样式块还存在。但当你点击按钮触发sayHi()时，页面已经完全加载完毕，这时候调用document.write()会直接清空整个页面的现有内容（包括你定义的<style>样式块），新输出的<h1>自然找不到对应的.class1样式，所以样式不生效。

正确的解决方法 #

别再用document.write()来动态添加内容啦，改用标准的DOM操作方法，既不会覆盖原有页面，还能正确应用样式。给你两种可行的方案：

方案1：创建DOM元素并添加到页面（推荐）

<style>
.class1 { color: red; font-size: 400%; }
</style>
<script type="text/javascript">
 function sayHi() {
  // 创建h1元素
  const heading = document.createElement('h1');
  // 添加CSS类
  heading.classList.add('class1');
  // 设置文本内容
  heading.textContent = 'Goodbye!';
  // 把元素添加到页面的body末尾
  document.body.appendChild(heading);
 }
</script>
<button onclick="sayHi()">Click me</button>

方案2：用innerHTML追加内容（不推荐但可用）

如果你坚持要使用类似写入的写法，可以用innerHTML向页面追加内容，这样不会覆盖原有页面和样式：

<style>
.class1 { color: red; font-size: 400%; }
</style>
<script type="text/javascript">
 function sayHi() {
  // 向body追加内容，保留原有页面结构和样式
  document.body.innerHTML += "<h1 class='class1'>Goodbye!</h1>";
 }
</script>
<button onclick="sayHi()">Click me</button>

注意：innerHTML频繁使用可能存在XSS风险，性能也不如原生DOM操作，所以优先推荐方案1。

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