为什么不能在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方法：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者，如果您想首先删除现有元素（但不 style），请清除document.body：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;