CSS 不适用于标签，写() 方法包含在函数内

Question

假设我写了一个函数，它在两个不同的HTML标记中写入一些文本，并在单击按钮时写入页面。问题是CSS样式没有应用于这些标签。。。但是，当我将相关代码放在函数之外时，它可以正常工作。

我的JS代码，

let i;
function myFunction() {
for (i=0; i<10; i++){
if (i % 2 == 0) {
write_this = "<green>This</green>"
}
else {
write_this ="<red>That</red>"
}
document.write(write_this)
}
}

CSS代码

green {
color: green;
}
red {
color: red;
}

HTML

<input type="button" onclick="myFunction()" value="My Button">

on点击按钮，希望它能做好工作。。。但是那些CSS颜色并没有应用到相关的文本中

1. 为什么它不起作用
2. 如何实现我想要的

Answer 1

您应该使用innerHTML而不是write来避免首先擦除整个文档。

关于write()

https://developer.mozilla.org/en-US/docs/Web/API/Document/write

注意：当document.write写入文档流时，对已关闭(加载(的文档调用document.write会自动调用document.open，，这将清除文档。

关于innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Element属性innerHTML获取或设置元素中包含的HTML或XML标记。

你可能会尝试做的事情更像：

let i;
function myFunction() {
var write_this = "";// prepare your var to update on the loop
for (i = 0; i < 10; i++) {
if (i % 2 == 0) {
write_this = write_this + "<green>This</green>"
} else {
write_this = write_this + "<red>That</red>"
}

// you may use a container
document.getElementById("mybox").innerHTML = write_this;
}
}

green {
color: green;
}
red {
color: red;
}

<input type="button" onclick="myFunction()" value="My Button">
<p id="mybox"></p>

Answer 2

当你的函数执行document.write(write_this(->时，它实际上是用新的内容替换当前文档

所以你以前的html，包括你的风格，都从文档中删除了。。。

更改为：

function myFunction() {
for (i = 0; i < 10; i++) {
if (i % 2 == 0) {
write_this = "<green>This</green>"
}
else {
write_this = "<red>That</red>"
}
document.body.innerHTML = write_this; // <------------
}