为什么不能在JS函数中使用CSS类来应用样式？

Question

在此代码中,函数sayHi()不会使用样式编写文本.为什么？如何将CSS类应用于函数中的document.write？

.class1 {
  color: red;
  font-size: 400%;
}

<script language="javascript" type="text/javascript">
  document.write("<h1 class=class1>Hello World</h1>");

  function sayHi() {
    document.write("<h1 class=class1>Goodbye!</h1>");
  }
</script>

<button onclick="sayHi()">Click me</button>

Answer 1

document.write是document.wrong- 无论何时在页面加载后使用它,它都会用新的HTML字符串替换整个页面.这绝不是一个好主意.在这种情况下,它正在替换包含CSS的页面,因此没有style适用于class1.

使用适当的DOM方法代替:

  function sayHi() {
    const h1 = document.body.appendChild(document.createElement('h1'));
    h1.className = 'class1';
    h1.textContent = 'Goodbye!';
  }

.class1 {
  color: red;
  font-size: 400%;
}

<h1 class=class1>Hello World</h1>
<button onclick="sayHi()">Click me</button>

或者,如果你想第一(但删除现有的元素没有的style),明确的document.body:

  function sayHi() {
    document.body.textContent = '';
    const h1 = document.body.appendChild(document.createElement('h1'));
    h1.className = 'class1';
    h1.textContent = 'Goodbye!';
  }

.class1 {
  color: red;
  font-size: 400%;
}

<h1 class=class1>Hello World</h1>
<button onclick="sayHi()">Click me</button>