Warum verändert sich mein CSS-Stil nicht?

Ich versuche, die Farbe des Textes zu ändern, Javascript, aber etwas so einfaches wie diese ist nicht mit Arbeits und ich verstehe nicht, warum ..Warum verändert sich mein CSS-Stil nicht?

<!DOCTYPE html> 
 

 
<html> 
 
    <script> 
 
     var y = document.getElementById('ya'); 
 
     y.style.color = "red"; 
 
    </script> 
 

 
<p style="font-size:100px;" id="ya"> 
 
    hi 
 
</p> 
 

 
</html>

Quelle

2016-10-20 Juan

Blick auf Ihre Browser-Entwickler-Tools-Konsole für einen Fehler –

den Skriptblock unterhalb der p-Block bewegen –

[Warum jQuery oder eine DOM-Methode wie getElementById das Element nicht finden?] (https://stackoverflow.com/questions/14028959/why-does-jquery-or-dom-method-such-as-geelementbyid-not-find-the (Element) –

die Sie interessieren, es funktioniert. Dies liegt daran, dass das Skript jetzt ausgeführt wird, nachdem das DOM-Element gerendert wurde.

<p style="font-size:100px;" id="ya"> 
 
    hi 
 
</p> 
 

 
<script> 
 
    var y = document.getElementById('ya'); 
 
    y.style.color = "red"; 
 
</script>

Quelle

2016-10-20 04:28:20

Da das Javascript, bevor Ihr p-Tag geladen wurde. Wenn Sie die Konsole überprüfen erhalten Sie einen Fehler „Typeerror sehen: Can not Eigenschaft‚Stil‘von null lesen

<!DOCTYPE html> 
 

 
<html> 
 
    
 
<p style="font-size:100px;" id="ya"> 
 
    hi 
 
</p> 
 
    <script> 
 
     var y = document.getElementById('ya'); 
 
     y.style.color = "red"; 
 
    </script> 
 

 
</html>

Quelle

2016-10-20 04:30:38

Ein Element mit id='ya' zu dem Zeitpunkt nicht definiert Sie JavaScript geschrieben Put.. das JavaScript in Ihrem Kopf und verwenden Sie onload = function(){/* code here */} oder addEventListener('load', function(){/* code here */}) und es sollte jedes Mal funktionieren (Nun, vielleicht nicht der erste Weg, wenn Sie mehrere Onloads haben. Aber es gibt einen Weg, indem Sie Onload auf eine Var zuweisen dann nach dem anderen Onload ausführen) Ich würde externes JavaScript verwenden, damit es im Cache Ihrer Clients gespeichert wird. Dadurch wird die Leistung der Website verbessert sicher, dass Sie Ihren Dateinamen ändern, wenn Sie Ihr JavaScript aktualisieren, wenn Ihre Site bereitgestellt wird, oder löschen Sie einfach Ihren Cache, wenn Sie noch daran arbeiten.

Quelle

2016-10-20 04:31:21 PHPglue

Zuerst können Sie jQuery.min.js in Ihrer Datei enthalten Ihr Code ist in Ordnung.

Test dieses

<script> 
     var y = document.getElementById('ya'); 
     y.css("color", "red"); 
    </script>

Quelle

2016-10-20 05:32:49

Das Element id Sie war nicht in der DOM als Skript zu finden versuchten, ausgeführt wird, bevor das DOM-Element macht.

Ihre DOM-Position sollte zuerst kommen, dann Skript, um das DOM-Element zu manipulieren.

Es gibt zwei Lösung für dieses Problem:

1. Bewegen Sie Ihren Script unter dem DOM.

<p style="font-size:100px;" id="ya"> 
    hi 
</p> 
<script> 
    var y = document.getElementById('ya'); 
    y.style.color = "red"; 
</script>

2. Verwendung jQuery document.ready()

<p style="font-size:100px;" id="ya"> 
    hi 
</p> 
<script> 
$(document).ready(function() { 
    var y = document.getElementById('ya'); 
    y.style.color = "red"; 
}); 
</script>

Quelle

2016-10-20 06:14:00

Warum verändert sich mein CSS-Stil nicht?

Antwort

Verwandte Themen