Jens Müller: css-Eigenschaft über javascript ändern

Hallo,

eigentlich funktioniert das Ändern einer css-Eigenschaft über javascript sehr gut. Aber in folgendem Code will es nicht so recht:

  
<HTML>  
<HEAD>  
 <style type="text/css">  
 #test { display:none; }  
 </style>  
</HEAD>  
<body>  
 <SCRIPT LANGUAGE="JavaScript">  
document.getElementById("test").style.display = "block";  
</SCRIPT>  
<div id="test">Hello World</div>  
</BODY>  
</HTML>  

Fehlerkonsole meldet:

Fehler: document.getElementById("test") is null

Was heißt das genau?

Schönen Tag, Jens

  1. <HTML>

    <HEAD>
    <style type="text/css">
    #test { display:none; }
    </style>
    </HEAD>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    document.getElementById("test").style.display = "block";
    </SCRIPT>
    <div id="test">Hello World</div>
    </BODY>
    </HTML>

    
    >   
    > Fehlerkonsole meldet:  
    >   
    > Fehler: document.getElementById("test") is null  
    >   
    > Was heißt das genau?  
      
    null ist ein Wert, den du in Gedanken mit "nichts" gleichsetzen kannst. Ist der Rückgabewert der Funktion getElementById() null, bedeutet dies dementsprechend, dass die Funktion nichts zurückgeliefert hat.  
      
    Falls du noch wissen möchtest, warum sie nichts liefert, suche in obigem Code selbst mal nach einem HTML-Element mit der ID "test". Du wirst finden: n…  
    
    
    1. Falls du noch wissen möchtest, warum sie nichts liefert, suche in obigem Code selbst mal nach einem HTML-Element mit der ID "test". Du wirst finden: n…

      Hi,

      ist das denn keins?

      <div id="test">Hello World</div>

      Gruß, Jens

      1. Falls du noch wissen möchtest, warum sie nichts liefert, suche in obigem Code selbst mal nach einem HTML-Element mit der ID "test". Du wirst finden: n…

        Hi,

        ist das denn keins?

        <div id="test">Hello World</div>

        _Dann_ schon. Aber dein getElementById()-Aufruf steht noch ein paar Zeilen früher in der Seite.

        1. _Dann_ schon. Aber dein getElementById()-Aufruf steht noch ein paar Zeilen früher in der Seite.

          Ja. Hab Deine Ergänzung gelesen, dann wird es klarer.

          Gruß, Jens

    2. <HTML>

      <HEAD>
      <style type="text/css">
      #test { display:none; }
      </style>
      </HEAD>
      <body>
      <SCRIPT LANGUAGE="JavaScript">
      document.getElementById("test").style.display = "block";
      </SCRIPT>
      <div id="test">Hello World</div>
      </BODY>
      </HTML>

      
      > >   
      > > Fehlerkonsole meldet:  
      > >   
      > > Fehler: document.getElementById("test") is null  
      > >   
      > > Was heißt das genau?  
      >   
      > null ist ein Wert, den du in Gedanken mit "nichts" gleichsetzen kannst. Ist der Rückgabewert der Funktion getElementById() null, bedeutet dies dementsprechend, dass die Funktion nichts zurückgeliefert hat.  
      >   
      > Falls du noch wissen möchtest, warum sie nichts liefert, suche in obigem Code selbst mal nach einem HTML-Element mit der ID "test". Du wirst finden: n…  
        
      Das sollte eigentlich noch um "zum Ausführungszeitpunkt der Funktion" ergänzt werden - hätte ich das Vorschaufeld richtig getroffen. Also:  
        
      'Falls du noch wissen möchtest, warum sie nichts liefert, suche in obigem Code zum Ausführungszeitpunkt der Funktion selbst mal nach einem HTML-Element mit der ID "test". Du wirst finden: n…'  
        
      Und vielleicht noch um dieses: HTML-Code wird von oben nach unten abgearbeitet. Es wird ausdrücklich nicht erst die Seite aufgebaut und dann Javascript-Code ausgeführt.  
      
      
  2. Hi,

    <HTML>

    <HEAD>
    <style type="text/css">
    #test { display:none; }
    </style>
    </HEAD>
    <body>
    <SCRIPT LANGUAGE="JavaScript">
    document.getElementById("test").style.display = "block";
    </SCRIPT>
    <div id="test">Hello World</div>
    </BODY>
    </HTML>

    
    >   
    > Fehlerkonsole meldet:  
    > Fehler: document.getElementById("test") is null  
      
    recht hatse ...  
    Zu der Zeit, wenn das Javascript ausgeführt wird, existiert das Element mit der ID "test" noch nicht. Mach dir klar, \*wann\* das Script ausgeführt wird, wenn es "einfach so" im Dokument steht.  
      
    Davon abgesehen: Es ist auch in HTML üblich, Element- und Attributnamen konsequent klein zu schreiben (in XHTML ist das sogar Pflicht), und das language-Attribut für einen Scriptblock war noch nie nötig, geschweige denn sinnvoll.  
    Dass ein DOCTYPE und ein title-Element fehlen, ist vermutlich dem Quick-n-Dirty-Test geschuldet.  
      
    So long,  
     Martin  
    
    -- 
    Um mit einem Mann glücklich zu werden, muss eine Frau ihn sehr gut verstehen und ein bisschen lieben.  
    Um mit einer Frau glücklich zu werden, muss ein Mann sie sehr lieben und darf gar nicht erst versuchen, sie zu verstehen.  
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    
    1. Zu der Zeit, wenn das Javascript ausgeführt wird, existiert das Element mit der ID "test" noch nicht. Mach dir klar, *wann* das Script ausgeführt wird, wenn es "einfach so" im Dokument steht.

      Ah, ok. Ich verstehe.
      Danke, Jens

  3. <SCRIPT LANGUAGE="JavaScript">
    document.getElementById("test").style.display = "block";
    </SCRIPT>
    <div id="test">Hello World</div>

    Hallo,

    lies dir mal folgendes durch:
    JavaScript: Einbindung in HTML mit dem script-Element

    Mathias

    1. lies dir mal folgendes durch:
      JavaScript: Einbindung in HTML mit dem script-Element

      Hallo Mathias,

      das ist super be-/geschrieben!
      Kleinen Fehler gefunden bei "bei die Scripte die Hauptarbeit erst verrichten".
      Sag mal, kann man das auch downloaden, ich würds gerne komplett lesen.

      Gruß, Jens

  4. @@Jens Müller:

    nuqneH

    eigentlich funktioniert das Ändern einer css-Eigenschaft über javascript sehr gut.

    Selbst wenn: funktioniert gut != ist gut. Eigentlich sollte man CSS-Eigenschaften nicht mit JavaScript ändern.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. eigentlich funktioniert das Ändern einer css-Eigenschaft über javascript sehr gut.

      Guten Tag,

      Aber was denn, wenn es nötig ist? Andernfalls könnte ich das, was ich da mache, nur über weitere Serverrequests realisieren.

      Jens

      1. @@Jens Müller:

        nuqneH

        Aber was denn, wenn es nötig ist?

        Wie Cheatah sagte: „DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“  Bspw. durch dynamisches Ändern von Klassenzugehörigkeiten: $('#foo).addClass('bar') / $('#foo).removeClass('bar') / $('#foo).toggleClass('bar').

        Die Styles stehen fest im Stylesheet:

        #foo { /* Styles */ }  
        #foo.bar { /* geänderte Styles */ }
        

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Die Styles stehen fest im Stylesheet:

          Ok. Verstehe.
          Danke, Jens