Question

我正在搞乱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，但是在我再使用它之前，我想从头开始明确理解

Answer 1

文档关闭后（document.write触发时）{@ 1}}不能破坏现有文档（包括样式表链接）。{/ p>

相反，请使用DOM操作，W3C JavaScript Core Skills的第8章和第9章介绍了这一点。

Answer 2

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

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

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

实际上在Opera浏览器中，我看到红色背景几毫秒，然后又回到白色。尝试发表评论document.write() - 背景符合预期。此外，您应在<script>的末尾添加body标记，但这不会解决您的问题。

^{*说实话，没有好的时机来调用document.write()，避免它}

Answer 3

在您的特定示例中，添加脚本标记的位置无关紧要，因为document.write命令在呈现内容后执行，覆盖现有内容。

如果您在覆盖内容之前添加提醒，则可以在被Hello World覆盖之前看到您的网页为红色。

使用body onload和document.write时忽略样式表

3 个答案: