1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Die Farbe eines Elements…

Dieses Thema im Forum "PHP & Co." wurde erstellt von Mini-Leopard, 07.08.09.

  1. Mini-Leopard

    Mini-Leopard Rhode Island Greening

    Dabei seit:
    20.03.08
    Beiträge:
    476
    Hallo liebe AT-Gemeinde!

    Ich habe heute versuch, mir eine Uhr zu schnitzen.
    Die funktioniert auch wunderbar, allerdings schaffe ich es leider nicht, die Textfarbe, Textgröße und Font-Familie zu verändern. Und eine Stunde Google brachte auch nicht viel :(

    Code:
    <script type="text/javascript">
    // Uhrzeit-Ausgabe einmal pro Minute
    function uhrzeit(anzeige) {
     Heute = new Date();
     Sekunde = Heute.getSeconds();
     if (Heute.getSeconds() == 0 || anzeige == "jetzt") {
      Stunde  = Heute.getHours();
      Minute  = Heute.getMinutes();
      if (Minute < 10) Minute = ("0" + Minute)
      var Uhrzeit = Stunde+":"+Minute;
      document.getElementById("uhr").innerHTML=Uhrzeit;
      [COLOR="Red"]document.getElementByld("uhr").style.Color = '#aaaaff';[/COLOR]
     }
    }
    </script>
    <body onLoad="uhrzeit('jetzt'); setInterval('uhrzeit()', 1000)">
    Das ist meine Uhr.
    Ich habe jetzt schon überall versucht, verschiedene Color-Tags einzufriemeln.
    Der rote und nun der, der ebenfalls nicht funktioniert und als letztes übrig geblieben ist.
    Edit: Mit der roten Zeile drin funktioniert die Uhr nicht mehr, sie updatet sich dann nicht.

    Es wäre echt spitze, wenn mir jemand von euch schnell mal die Zeile da einstricken könnte!


    Vielen vielen Dank!!
     
  2. torben1

    torben1 Süsser Pfaffenapfel

    Dabei seit:
    05.08.08
    Beiträge:
    661
    Du sprichst ein Element an das noch nicht Existiert. Mache die Änderungen nachdem Du das Element im Quelltext hast, oder erzeuge das Element mit Javascript.
    Code:
    <div id="uhr">
            Uhrzeit
    </div>
    <script type="text/javascript">
        document.getElementById("uhr").style.color ="red";
    </script>
    
    Torben
     
  3. Mini-Leopard

    Mini-Leopard Rhode Island Greening

    Dabei seit:
    20.03.08
    Beiträge:
    476
    Super, so geht das. Danke!
    Aber wieso existiert das Element "uhr" noch nicht?
    Ich hab es doch schon in der Zeile vor der roten aufgerufen…

    Und… Wie kann ich dann nochmal Größe und Font ändern??



    Vielen lieben Danke dafür schonmal!
     
  4. gKar

    gKar Maunzenapfel

    Dabei seit:
    25.06.08
    Beiträge:
    5.362
    Ist es sinnig, Stylingaspekte wie die Schriftfarbe in den Scriptcode zu packen? Die würde ich doch eher in einer externen CSS-Datei losgelöst festlegen:
    #uhr {color:#aaf}
     
  5. torben1

    torben1 Süsser Pfaffenapfel

    Dabei seit:
    05.08.08
    Beiträge:
    661
    Es ist immer dann "sinnig" wenn Style-Elemente zur Laufzeit geändert werden sollen. Ein Script ist ja auch was Dynamisches ;).

    @Mini-Leopard: Aufgerufen hast Du das Element ja, aber es ist halt noch nicht da. Wenn Du es vorher brauchst, musst Du es mit JS erstellen.

    Zum Rest:

    Code:
    var knoten = document.getElementById("uhr");
    konten.style.color = "red";
    knoten.style.fontSize = "30px";
    knoten.style.fontFamily = "Arial";
    
    Torben
     
    Mini-Leopard gefällt das.
  6. gKar

    gKar Maunzenapfel

    Dabei seit:
    25.06.08
    Beiträge:
    5.362
    Yep, das ist schon richtig. Allerdings hatte ich hier den Eindruck, dass das einzig dynamische an dieser Uhr die angezeigte Uhrzeit ist. Die Farbe scheint mir hier statisch zu sein.
     
  7. Mini-Leopard

    Mini-Leopard Rhode Island Greening

    Dabei seit:
    20.03.08
    Beiträge:
    476
    Ja.
    Die Farbe ist statisch.
    Aber wie dem auch sei. Mir ist immer noch nicht klar geworden, wieso ich dieses komische
    Code:
    <div id="uhr">
    und so weiter einbauen muss.
    Ich rufe doch das Element "uhr" hier
    Code:
      document.getElementById("uhr").innerHTML=Uhrzeit;
    schonmal auf. Wieso geht dann bitte das fast identische
    Code:
      document.getElementByld("uhr").style.Color = '#aaaaff';
    nicht?! Naja gut. Vielleicht verstehe ich das ja bald, wenn ich mehr im JS Syntax drin bin.
    Ich fange gerade mit JS an… Da ist jeder Anfang schwer ;)
    Ihr kennt das.

    @ torben1:
    Ich habe jetzt auch die "Mittigkeit" gefunden (siehe PN):
    Code:
    …style.textAlign = "center";
    @ gKar:
    Ändert sich denn Deiner Meinung nach irgendwas, durch die Tatsache, dass die Farbe nicht statisch ist?
    Ich stelle euch einfach nochmal die komplette Uhr zur Verfügung:
    Code:
    <script type="text/javascript">
    // Uhrzeit-Ausgabe einmal pro Minute
    function uhrzeit(anzeige) {
     Heute = new Date();
     if (Heute.getSeconds() == 0 || anzeige == "jetzt") {
      Stunde  = Heute.getHours();
      if (Stunde < 10) Stunde = ("0" + Stunde);
      Minute  = Heute.getMinutes();
      if (Minute < 10) Minute = ("0" + Minute);
      var Uhrzeit = Stunde+":"+Minute;
      document.getElementById("uhr").innerHTML=Uhrzeit;
     }
    }
    </script>
    <div id="uhr">
            Uhrzeit
    </div>
    <script type="text/javascript">
        document.getElementById("uhr").style.color ="#000000";
        document.getElementById("uhr").style.fontSize = "30px";
        document.getElementById("uhr").style.fontFamily = "Arial";
        document.getElementById("uhr").style.fontWeight = "bold";
        document.getElementById("uhr").style.textAlign = "center";
    		alert (uhr)
    </script>
    <body onLoad="uhrzeit('jetzt'); setInterval('uhrzeit()', 1000)">
    
    <b id="uhr"></b>

    Liebste Grüße
     
  8. torben1

    torben1 Süsser Pfaffenapfel

    Dabei seit:
    05.08.08
    Beiträge:
    661
    Hi nochmal,

    aller Anfang ist schwer ;) Eine kleine Sache stimmt noch nicht so ganz. Du hast vor dem Body-Element ein HTML-TAG. Das ist nicht erlaubt.
    So sollte es aber auch gehen:

    Code:
    <script type="text/javascript">
    // Uhrzeit-Ausgabe einmal pro Minute
    function uhrzeit(anzeige) {
     Heute = new Date();
     if (Heute.getSeconds() == 0 || anzeige == "jetzt") {
      Stunde  = Heute.getHours();
      if (Stunde < 10) Stunde = ("0" + Stunde);
      Minute  = Heute.getMinutes();
      if (Minute < 10) Minute = ("0" + Minute);
      var Uhrzeit = Stunde+":"+Minute;
      document.getElementById("uhr").innerHTML=Uhrzeit;
     }
    }
    </script>
    
    [COLOR=DarkRed]<body onLoad="uhrzeit('jetzt'); setInterval('uhrzeit()', 1000)">
    
    <b id="uhr"></b>[/COLOR]
    
    
    <script type="text/javascript">
        document.getElementById("uhr").style.color ="#000000";
        document.getElementById("uhr").style.fontSize = "30px";
        document.getElementById("uhr").style.fontFamily = "Arial";
        document.getElementById("uhr").style.fontWeight = "bold";
        document.getElementById("uhr").style.textAlign = "center";
            alert (uhr)
    </script>
    
    
    
    
    Ich würde
    Code:
    [COLOR=DarkRed]<b id="uhr"></b>[/COLOR]
    noch in
    Code:
    [COLOR=DarkRed]<p id="uhr"></p>[/COLOR]
    ändern.
    Zu Deiner Frage bezüglich des Elementaufrufes. Nicht der Einbau von
    Code:
    <div id="Uhrzeit">Uhrzeit</uhrzeit>
    sondern der Scriptaufbau ist am Funktionieren "schuld". Ich müsste jetzt aber selber nachsehen ob und warum das so ist.

    In Deinem Fall ist es aber so, dass Du die Style-angaben komplett in CSS auslagern kannst und dies auch sinniger wäre. Du veränderst die Werte ja nicht.

    In Deinem Fall wäre eine dynamische Styleänderung z.B. wenn Du die Uhrzeit immer
    Nachts dunkler haben möchtest und Tagsüber heller. Dann würdest Du einen Style mit CSS definieren und den zweiten dynamisch ändern.

    Torben
     
  9. Bajuware

    Bajuware Oberösterreichischer Brünerling

    Dabei seit:
    23.04.08
    Beiträge:
    707
    Cool! Man lernt nie aus ;)

    Ich hätte da auch noch einen:

    Code:
    <div id="Eis-am-Stiel">Langnese</Eis-am-Stiel>
     
  10. torben1

    torben1 Süsser Pfaffenapfel

    Dabei seit:
    05.08.08
    Beiträge:
    661
    Ich sollte
    Code:
    <div id="erst">denken dann </schreiben>
    
     
  11. gKar

    gKar Maunzenapfel

    Dabei seit:
    25.06.08
    Beiträge:
    5.362
    .

    Mit dem HTML-Tag <div id="uhr">xyz</div> wird die Uhr in die Seite eingebaut.
    Der Scriptcode getElementById("uhr") sucht nach dem Rendern des HTML-Codes (wenn also die Uhr mit dem Vorgabetext "xyz" schon da ist) eben diesen Knoten des DOM-Baums heraus, und ermöglicht, ihn nachträglich zu manipulieren.
    Man kann auch per Script-Code neue Knoten erzeugen und einfügen, aber das wäre hier wohl unnötig kompliziert und unübersichtlich.

    Schon. Aber schieb das nicht zu sehr auf die JavaScript-Syntax. Bevor Du mit JavaScript am DOM-Baum rumwerkelst, sind Grundkenntnisse des DOM und HTML von enormem Vorteil.

    Ach ja: Doch ein Punkt zu JavaScript-Syntax: Beachte stets peinlich genau die Groß-/Kleinschreibung. Es müsste m.W. style.color, nicht style.Color heißen.

    Es geht hier einfach um ein sauberes Webdesign. So wie HTML-Code möglichst nur Inhalte und kein Design enthalten soll, sondern das Design in CSS-Code ausgelagert wird und damit auch relativ leicht austauschbar ist, so sollte m.E. auch im Script-Code erstens nur das verändert werden, was wirklich dynamisch ist, zweitens gehört Design m.E. auch nur in CSS-Code und nicht in JS-Code. Selbst bei dynamischer Änderung zwischen z.B. zwei Farben für sematische Bedeutungen wie „Uhr wurde gerade gestellt“ und „sonstiges“, würde ich entsprechende CSS-Classes dafür extern definieren und per JS nur die Klasse (className) umschalten, aber keine Direktformatierung per JS vornehmen.

    Edit: Sehe gerade, was ich geschrieben habe: „semantische Bedeutungen“ ´, oh oh...
    Ich lass' das aber mal so drinnen: Sollte ja verständlich sein, und lustig find' ich's auch ;)
     

Diese Seite empfehlen