6

我正在用 JavaScript 试验来感受它，并且已经遇到了一个问题。这是我的html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="testing.js"></script>
</head>
<body onload="writeLine()">
</body>
</html>

这是 JavaScript testing.js：

function writeLine()
{
    document.write("Hello World!")
}

这是样式表styles.css：

html, body {
    background-color: red;
}

这是一个非常简单的例子，但我可能选择了一个尴尬的例子，在 body 标签中使用 on-load。所以上面的代码加载并运行函数，但是样式表什么都不做，除非我删除头部的脚本标签。我曾尝试将脚本标签放在其他任何地方，但没有任何效果。我在网上研究了如何正确链接到 JavaScript 文件，但没有找到明确的解决方案，谁能指出我的错误？

我以前用过JavaScript，但在我不再使用它之前，我想从一开始就清楚地了解它

4

3 回答 3

3

您不能document.write在文档关闭后使用（它会在onload触发时）而不破坏现有文档（包括指向样式表的链接）。

取而代之的是使用 DOM 操作，这在W3C JavaScript 核心技能的第 8 章和第 9 章中有介绍。

于 2012-05-28T13:40:24.200 回答
2

你的问题是document.write()在错误的时刻被调用*。此方法在页面的当前位置打印给定的文本，以便在页面仍在加载时工作。因为您在加载整个页面时调用它，所以结果是意外的（未定义？）

相反，您应该直接操作树：

function writeLine() {
    var text = document.createTextNode("Hello World!");
    document.body.appendChild(text);
}

实际上在 Opera 浏览器中，我看到红色背景几毫秒，然后又变回白色。尝试注释掉document.write()- 背景符合预期。此外，您应该<script>在末尾包含标签body，但这不会解决您的问题。

* 老实说，没有打电话的好时机document.write()，避免它

于 2012-05-28T13:41:46.920 回答
2

document.write在您的特定示例中，在呈现内容后执行命令并覆盖现有内容时，添加脚本标记的位置并不重要。

如果您在覆盖内容之前添加警报，您可以看到您的页面在被覆盖之前是红色的Hello World。

于 2012-05-28T13:42:02.047 回答