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

【问题标题】：JavaScript's document.write doesn't work like PHP's echoJavaScript document.write 不像 PHP echo 那样工作
【发布时间】：2015-08-03 21:44:41
【问题描述】：

我正在尝试让 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 做同样的事情，如果可以，我做错了什么以及如何解决它。

【问题讨论】：

我不可能看到在 PHP 中有一个没有回显的 div 会起作用。
@Fred-ii- 不在 PHP 中。 PHP 之外，脚本内部的样式标签，以及脚本外部的 div。
@TomFenech 你猜对了 ;-)
不确定，但我认为 javascript 在页面加载后发生，因此样式不会更新
在这个时代，大多数用户都开启了 JS。话虽如此，你不需要 JS 来处理屏幕宽度的事情。使用 CSS media queries。这应该是 A 计划 @frosty

标签： javascript php html css

【解决方案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>

【讨论】：

必须全部在同一行还是串联？伙计，JavaScript 让使用它变得不那么容易了。
JavaScript 比 PHP 严格得多，我认为它非常灵活

【解决方案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");

【讨论】：