Die Farbe eines Elements…

Mini-Leopard · 07.08.09

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!!

torben1 · 07.08.09

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

Mini-Leopard · 07.08.09

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!

gKar · 07.08.09

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}

torben1 · 07.08.09

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

gKar · 07.08.09

torben1 schrieb:
Es ist immer dann "sinnig" wenn Style-Elemente zur Laufzeit geändert werden sollen. Ein Script ist ja auch was Dynamisches .

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.

Mini-Leopard · 08.08.09

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

torben1 · 08.08.09

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

Bajuware · 08.08.09

torben1 schrieb:
<div id="Uhrzeit">Uhrzeit</uhrzeit>

Cool! Man lernt nie aus

Ich hätte da auch noch einen:

Code:

<div id="Eis-am-Stiel">Langnese</Eis-am-Stiel>

torben1 · 09.08.09

Ich sollte

Code:

<div id="erst">denken dann </schreiben>

gKar · 09.08.09

Mini-Leopard schrieb:
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

.

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.

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

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.

@ gKar:
Ändert sich denn Deiner Meinung nach irgendwas, durch die Tatsache, dass die Farbe nicht statisch ist?

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

Suche

Suche

Die Farbe eines Elements…

Mini-Leopard

Rhode Island Greening

torben1

Celler Dickstiel

Mini-Leopard

Rhode Island Greening

gKar

Maunzenapfel

torben1

Celler Dickstiel

gKar

Maunzenapfel

Mini-Leopard

Rhode Island Greening

torben1

Celler Dickstiel

Bajuware

Apfel der Erkenntnis

torben1

Celler Dickstiel

gKar

Maunzenapfel

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)