如何将CSS应用到document.write()？

k2fxgqgv 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(181)

我有一个程序，它将使用Javascript使用'document.write（）'将值'打印'到屏幕上。打印的值是一个整数。我希望能够使用CSS应用到这个整数正在打印出来的样式。下面是我尝试做的一些截短的示例代码，但它不起作用（程序只是退出：

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

这是我使用的CSS代码：

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

谢谢

css

来源：https://stackoverflow.com/questions/32176216/how-to-apply-css-to-document-write

2条答案

按热度按时间

g9icjywg1#

那是不对的参见更正：

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>

UPDATE：不要使用之前的方法。

上述方法是完全错误的。它将删除所有事件处理程序并完全损坏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>

赞(0）回复(0）举报 2023-05-08

omtl5h9j2#

你可以使用es6模板文字：document.write（<p id="jstext"> ${ number }</p>）

赞(0）回复(0）举报 2023-05-08