JavaScript的document.write不像PHP的echo那样工作

Question

我正在尝试让JavaScript的document.write像PHP的echo一样工作。例如：

<?php

echo "
<style>
div {
border: 1px solid black;
}
<style>
";

?>

<div> Hello </div>

在PHP中可以正常工作，并且它会在div周围形成1px纯黑色的边框。但是在JavaScript中：

<script>

document.write("
<style>
div {
border: 1px solid red;
}
<style>
");

</script>

<div> Hello </div>

它不起作用，并且它不会在div周围形成1px纯黑色的边框。我想知道是否甚至可以用JavaScript做同样的事情，如果是这样，我做错了什么以及如何解决它。

Answer 1

我在你的javascript代码中看到两个错误。第一，您不能在代码中使用新行。它需要遍布一行或通过结束字符串连接，然后在下一行使用+。

您也没有关闭正在破坏最终输出的style标记。

以下代码适用于我：

<script type="text/javascript">

document.write("<style>div {border: 1px solid red;}</style>");

</script>

<div> Hello </div>

或者，如上所述，字符串连接：

<script>

document.write(
    "<style>"
    +"div {"
    +"border: 1px solid red;"
    +"}"
    +"</style>"
);

</script>

<div> Hello </div>

Answer 2

只需像这样创建无样式div：

<div id="box1"></div>

然后你可以用这样的js来操纵样式：

document.getElementById('box1').style.cssText = 'background-color:black;height:50px;';

使用jQuery，它更容易：

HTML：

<div id="box1"></div>

jQuery的：

$("#box1").css("background-color", "black");