Design durch JavaScript ändern

Padde11 · 19. Februar 2010

http://www.html-seminar.de/jav…html-elemente-aendern.htm

ziemlich weit unten bei "Design durch JavaScript und CSS ändern" steht dass man hiermit

Code

<script type="text/javascript">
<h1>JavaScript Kurs für Einsteiger</h1>
<p>JavaScript lernen einfach gemacht … </p>
document.getElementByTagName('h1').style.color = 'orange';
</script>

den text für h1 orange machen kann.....das klappt bei mir leider nicht....
hab h1 und p dadrüber (also über <script......>)gemacht damit der text angezeigt wird und dann auch nochmal anstatt

Code

document.getElementByTagName('h1').style.color = 'orange';

dann

Code

document.getElementsByTagName('h1').style.color = 'orange';

gemacht (also Element mit "s") aber nichts verändert sich.....weiß jemand wie es richtig gemacht wird?????
thx
PS:sry wenn es ne dumme frage ist ich bin noch anfänger

Basi · 19. Februar 2010

Es ist immer besser die Sachen einzeln anzusprechen, sprich nicht alle h1, sondern eine id, also so:

Code

<h1 id="meineheadline">Hallo</h1>

dann so:

Code

document.getElementById('meineheadline').style.color = 'orange';

So löst du den Effekt erst aus wenn du die Überschrift anklickst:

Code

<h1 id="meineheadline" onclick="change()">Hallo</h1>




  <script language="javascript" type="text/javascript">




    function change() {
          document.getElementById('meineheadline').style.color="orange";
    }




  </script>

Alles anzeigen

Du kannst auch ein Textfeld benutzn, trägst da die gewünschte Farbe ein, und klickst auf Ok:

Code

<h1 id="meineheadline">Hallo</h1>




  <input type="text" id="farbe" />
  <input type="button" value="Farbe &auml;ndern" onclick="change()" />




  <script language="javascript" type="text/javascript">




    function change() {
          var farbe = document.getElementById('farbe').value;
          document.getElementById('meineheadline').style.color=farbe;
    }




  </script>

Alles anzeigen

Hier das ganze für Farbe und Größe (ja, mir ist langweilig^^):

Code

<h1 id="meineheadline">Hallo</h1>




  <input type="text" id="color" />
  <input type="button" value="Farbe &auml;ndern" onclick="changecolor()" />
  <br />
  <input type="text" id="size" />
  <input type="button" value="Gr&ouml;&szlig;e &auml;ndern" onclick="changesize()" />




  <script language="javascript" type="text/javascript">




    function changecolor() {
          var color = document.getElementById('color').value;
          document.getElementById('meineheadline').style.color=color;
    }




    function changesize() {
          var size = document.getElementById('size').value;
          document.getElementById('meineheadline').style.fontSize=""+size+"px";
    }




  </script>

Alles anzeigen

Padde11 · 21. Februar 2010

achso....danke

Design durch JavaScript ändern

Jetzt mitmachen!

Teilen