javascript - 如何将 CSS 应用于 document.write()？

Question

我有一个程序将使用 Javascript 使用“document.write()”将值“打印”到屏幕上。打印的值是一个整数。我希望能够使用 CSS 将样式应用于正在打印的这个整数。下面是我尝试做的一些 chop 的示例代码，但它不起作用(程序刚刚退出:

var number = 5 //just for an example
document.write('<p id="jstext"' + number + '</p>')

这是我正在使用的 CSS 代码:

#jstext {
    text-align: center;
    font-size: 90px;
}

谢谢

Answer 1

这是错误的。查看更正:

var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^

您在这里忘记了结束符 >。

下面的工作片段:

#jstext {
  text-align: center;
  font-size: 90px;
}

<script>
var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^
</script>

---

更新:不要使用以前的方法。

上面的方法是完全错误的。它将删除所有事件处理程序并完全损坏 DOM。更好的方法是使用:

document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;

片段

#jstext {
  text-align: center;
  font-size: 90px;
}

<script>
var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;
</script>