當使用body onload和document.write時忽略樣式表

我正在搞JavaScript實驗來感受它，並且已經遇到了問題。這裏是我的html代碼：當使用body onload和document.write時忽略樣式表

<!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; 
}

所以有一個非常簡單的例子，但我可能選擇了一個尷尬的例子，使用在身體標籤上加載。所以上面的代碼加載並運行該函數，但樣式表不做任何事情，除非我刪除頭部中的腳本標記。我曾嘗試將腳本標籤放在其他地方，但沒有任何效果。我研究瞭如何正確鏈接到JavaScript文件，並且沒有找到明確的解決方案，任何人都可以指出我的錯誤？

我之前已經使用的JavaScript，但我想從一開始就清醒的認識之前，我用它不再

來源

2012-05-28 deucalion0

[此帖子]（http://stackoverflow.com/q/10661964/575527）或許可以解釋更多 – Joseph

演示：http://jsfiddle.net/C6jKG/ –

你應該避免使用'document.write（） ' – lanzz

你的問題是document.write()在錯誤的時刻叫^*。此方法在頁面中當前位置打印給定文本，以便在頁面仍然加載時工作。因爲你在呼喚它加載整個頁面的時候，結果是出乎意料的

相反，你應該直接操作dom樹（未定義）：

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

其實Opera瀏覽器我看到幾個紅色背景毫秒，然後它回到白色。嘗試註釋掉document.write() - 背景如預期。此外，您應該在body的末尾包含<script>標籤，但這不會解決您的問題。

^{*說實話，沒有好的時刻調用document.write()，避免}

來源

2012-05-28 13:41:46

我認爲'document.write'和'document.writeLn'是在實踐中應該被考慮棄用的工件。我從來沒有在字面上使用過它。 –

所以我實際上在我學習JavaScript的第一天就開始感到麻煩了，但是我很高興我做了，因爲我在這裏發現了很多有趣的東西！感謝您的信息！ – deucalion0

我選擇了你的文章作爲答案，因爲你提供了更多的信息！我會盡量避免document.write作爲標準！乾杯! – deucalion0

不能使用document.write文件關閉後（它會當onload火災）而不破壞現有的文檔（包括樣式表的鏈接）。

取而代之，使用DOM操作，該操作由W3C JavaScript Core Skills的第8章和第9章介紹。

來源

2012-05-28 13:40:24 Quentin

這解釋了爲什麼樣式表看起來不起作用;它已被刪除/替換，然後是空的''。 –

非常感謝你指出爲什麼它不起作用，我很困惑！我現在正在查找DOM操作！謝謝！ – deucalion0

在您的具體的例子沒關係其中添加腳本標記爲document.write命令執行後的內容是渲染，覆蓋現有的內容。

如果在覆蓋內容之前添加提醒，您可以看到您的頁面在被Hello World覆蓋之前是紅色的。

來源

2012-05-28 13:42:02 Nope

感謝您的建議，我現在發現了我的問題！謝謝！ – deucalion0

當使用body onload和document.write時忽略樣式表

回答

相關問題