2012-05-28 10 views
5

Mam problem z eksperymentowaniem z JavaScriptem, aby go poznać i już udało mu się rozwiązać problem. Tu jest mój kodu html:Arkusz stylów został zignorowany podczas korzystania z body onload i 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> 

Oto testing.js JavaScript:

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

Oto styles.css arkusz stylów:

html, body { 
    background-color: red; 
} 

Więc bardzo prosty przykład, ale mógłbym wybrać niewygodny przykład, używając na obciążenia znacznika body. Tak więc powyższy kod ładuje i uruchamia funkcję, ale arkusz stylów nic nie robi, chyba że usunę znaczniki skryptu w głowie. Próbowałem wstawiać znaczniki skryptów wszędzie, ale nic nie działa. Sprawdziłem w Internecie, jak prawidłowo połączyć z plikami JavaScript, i nie znalazłem żadnego jasnego rozwiązania, czy ktoś może wskazać mój błąd?

Użyłem JavaScript wcześniej, ale chcę jasnego zrozumienia od samego początku, zanim go używać dłużej

+2

[ten wpis] (http://stackoverflow.com/q/10661964/575527) może wyjaśnić więcej – Joseph

+1

Demo: http://jsfiddle.net/C6jKG/ –

+2

Powinieneś unikać używania 'document.write() ' – lanzz

Odpowiedz

2

Twój problem dotyczy document.write() wywołanego w niewłaściwym momencie *. Ta metoda drukuje dany tekst w bieżącym miejscu na stronie, ponieważ miał on działać, gdy strona wciąż się ładuje. Ponieważ dzwonisz, kiedy cała strona została załadowana, wyniki są nieoczekiwane

Zamiast tego należy manipulować drzewa bezpośrednio (nieokreślone):

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

Właściwie w przeglądarce Opera widzę czerwone tło dla nielicznych milisekundy, a następnie wraca do białego. Spróbuj komentować document.write() - tło jest zgodne z oczekiwaniami. Ponadto powinieneś dołączyć znacznik <script> pod koniec body, ale to nie rozwiąże twojego problemu.

* szczerze mówiąc, nie jest dobry moment na wywołanie document.write() unikaj go

+0

Uważam, że 'document.write' i' document.writeLn' są artefaktami, które w praktyce należy uznać za przestarzałe. Nie używałem tego w dosłownie latach. –

+0

Więc faktycznie spowodowałem sobie kłopot w pierwszym dniu nauki JavaScript przez document.write, ale cieszę się, że zrobiłem, ponieważ odkryłem tu wiele interesujących rzeczy! Dzięki za informacje! – deucalion0

+0

Wybrałem twój post jako odpowiedź, ponieważ dostarczyłeś trochę więcej informacji! Spróbuję uniknąć document.write jako standardu! Twoje zdrowie! – deucalion0

3

Nie można używać document.write po dokument jest zamknięta (która to będzie, kiedy onload pożary) bez niszczenia istniejący dokument (w tym linki do arkuszy stylów).

Zamiast tego użyj manipulacji DOM, która jest objęta rozdziałami 8 i 9 W3C JavaScript Core Skills.

+0

Co wyjaśnia, dlaczego arkusz stylów nie działa; został usunięty/zastąpiony, a następnie pusty "". –

+0

Dziękuję bardzo za wskazanie DLACZEGO to nie działa, byłem zaskoczony! Teraz szukam manipulacji DOM! Dziękujemy! – deucalion0

2

W danym przykładzie nie ma znaczenia, gdzie dodawany jest znacznik script jako komenda document.write wykonuje po treści renderowane, zastępując istniejącą treść.

Jeśli dodasz alert przed zastąpieniem treści, zobaczysz, że twoja strona jest czerwona, zanim zostanie nadpisana Hello World.

+0

Dzięki za radę, odkryłem moje problemy! Dziękujemy! – deucalion0

Powiązane problemy