nicht angemeldet
Styles von "getElementsByTagName" auslesen JAVASCRIPT-DOM
MudGuardHallo Leute,
so langsam stehe ich hier mit einem Problem auf dem Schlauch.
Folgendes möchte ich erreichen:
Erstellung eines CMS-Menüs das dynamisch über das CMS mit Inhalten versehen werden kann und welches beim Überfahren mit der Maus seine horizontal ausgerichteten Listen-Hintergründe ändert.
Problem:
Normalerweise ist das ja garkein Problem, doch hier liegt der Fall anders, da mir durch die Design-Vorlage des Menüs vorgegeben wird ZWEI Listen-Hintergründe ("<li>") beim Überfahren eines Links innerhalb EINES Listen-Elementes zu ändern.
Die Listen-Elemente selber, können durch die automatisierte Ausgabe des CMS NICHT via Id kenntlich gemacht werden, was hier dann auch den maßgeblichen Auslöser für mein Problem darstellt! Was hier also für mich das Problem darstellt, ist schlicht die Tatsache dass ich via "getElementsByTagName" anscheinend nicht ermitteln kann, welcher Anker gerade durch Hover eine andere Schriftfarbe bekommen hat, um dies zu ermitteln und so dann den Hintergrund DIESES Ankers- sowie den Hintergrund des vorangegangenen Ankers im Listenfeld zu ändern.
Mein bisheriges Konzept:
Ich ermittele die Style-Änderung eines mit der Maus überfahrenen Menüelemente (in <li> enthaltenes <a href>) durch eine Funktion via onmouseover und schreibe dann dynamisch den Hintergrund des überfahrenen Elementes neu. Ich habe durch rumprobieren schon ermittelt dass ich problemlos via
document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.color = 'red';
zb. die Schriftfarbe ändern kann, ebenso wie Höhe und den Hintergrund etc. Ich kann nur NICHT ERMITTELN wie die Textfarbe eines Elementes ist! Wenn ich versuche das via
alert(document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.color);
auszugeben bekomme ich nichts als ein leeres Alert-Feld!?
Frage:
Warum kann ich sehr wohl über die genannten Routinen einen Style für ein betreffendes Element setzen, NICHT aber auslesen?
Quelltext der Html-Seite:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function get_li() {
for(var i = 0; i < document.getElementById('uli').getElementsByTagName("li").length; i++)
{
var gesuchte_Link_Farbe = document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.color;
if (gesuchte_Link_Farbe == "#ffffff")
{
document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.background = 'url(neu1.jpg)';
var davor = parseInt(i-1);
document.getElementById('uli').getElementsByTagName("li")[davor].getElementsByTagName("a")[0].style.background = 'url(neu2.jpg)';
}
}
}
//-->
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Nature's Charm by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="header">
<div id="menu">
<ul id="uli">
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
<li><a href="#" onmouseover="get_li()">Bla</a></li>
</ul>
</div>
</div>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</body>
</html>
Ich vermute dass es sich hier nur um ein sehr kleines Problem handelt, doch ich wäre für jeden Schubser in die richtige Richtung dankbar! :-)
Gruss
-Pfuscharrr
-
Hi,
Warum kann ich sehr wohl über die genannten Routinen einen Style für ein betreffendes Element setzen, NICHT aber auslesen?
Ueber style kannst du Werte nur dann auslesen, wenn du sie zuvor bereits ueber style gesetzt hast (oder sie per style-Attribut am Element selber gesetzt wurden).
if (gesuchte_Link_Farbe == "#ffffff")
Auch das wird problematisch werden, da dir nicht jeder Browser einen Farbwert in genau dieser Schreibweise zurueckliefern wird.
Die Listen-Elemente selber, können durch die automatisierte Ausgabe des CMS NICHT via Id kenntlich gemacht werden, was hier dann auch den maßgeblichen Auslöser für mein Problem darstellt!
Warum wechselst du dann nicht zu einem faehigeren System?
Btw: IDs koennte man auch per JavaScript setzen.
Was hier also für mich das Problem darstellt, ist schlicht die Tatsache dass ich via "getElementsByTagName" anscheinend nicht ermitteln kann, welcher Anker gerade durch Hover eine andere Schriftfarbe bekommen hat, um dies zu ermitteln und so dann den Hintergrund DIESES Ankers- sowie den Hintergrund des vorangegangenen Ankers im Listenfeld zu ändern.
Der Ansatz ist ja auch bloedsinnig.
Per mouseover weisst du doch bereits, welches Element ueberfahren wurde - warum willst du jetzt noch die Textfarbe auslesen, um aus dieser dann wiederum irgendwie Rueckschluesse auf das Element zu ziehen?MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Per mouseover weisst du doch bereits, welches Element ueberfahren wurde - warum willst du jetzt noch die Textfarbe auslesen, um aus dieser dann wiederum irgendwie Rueckschluesse auf das Element zu ziehen?
Du hast Recht! Ich bin seit ein paar Tagen ohne Schlaf und nur noch in den Kaffeetopf gefallen!
Danke für deine schnelle Reaktion!
-Pfuscharr
-
Habe hier gerade nochmal reingeschaut und gesehen dass nach Chris Posting nochmal weitere Leute geantwortet haben; euch allen meinen Dank!
NATÜRLICH hat sich das Prob. nach Chris erster Antwort sofort erledigt, denn ich kann für meine Anforderungen problemlos über
thisMenü- (<li> Index) positionen- und somit auch die betreffenden Anker via mouseover ermitteln und dann über die obige (modifizierte) Funktion im Style umfangreich verändern wie ich will.Ich war nur ziemlich übermüdet und gestresst, so dass mir das einfach nicht mehr aufgehen wollte *kopfkratz*
Weiter: JA, es ging einfach darum Styles von horizontal ausgerichteten Elementen eines <li>-Blocks gezielt zu verändern, wobei jeweils der mit der Maus überfahrene- UND der links vom überfahrenen Eintrag liegende Listeneintrag gleichzeitig verändert werden sollten. (Was nun auch hervorragend funktioniert)
Vielen Dank an alle Antworter!
Grüße
-Pfuscharrr
-
-
-
Normalerweise ist das ja garkein Problem, doch hier liegt der Fall anders, da mir durch die Design-Vorlage des Menüs vorgegeben wird ZWEI Listen-Hintergründe ("<li>") beim Überfahren eines Links innerhalb EINES Listen-Elementes zu ändern.
Sorry, mir ist nicht wirklich klar, was du vorhast. Bitte beschreibe es nochmal verständlicher.
Mit allergrößter Wahrscheinlichkeit ist ein Auslesen von Styles nicht nötig und dein jetziger Ansatz scheint mir nicht umständlich. Also beschreibe bitte genau, welches Verhalten gewünscht ist.
Soweit ich das verstehe:
Maus bewegt sich über die Fläche eines li-Elements.
Du willst diesem Element (oder seinem a-Kindelement - egal) irgendwelche Styles verpassen.
Okay, soweit kein Problem.
Jetzt willst du noch ein anderes li-Element ändern. Welches? In welchem Verhältnis stehen die beiden li-Elemente zueinander?
Deinem Code entnehme ich, dass es sich um das jeweils vorherie li-Element handelt, sofern das existiert.Okay, kein Problem. Das ist mit Event-Handling und ganz einfachen DOM-Operationen möglich. Du musst im Event-Handler nur an das Element kommen, das die Maus gerade berührt hast. Das kannst du über this tun, falls du allen li-Elementen ein mouseover-Handler gibst. Mit Inline-JavaScript:
<li onmouseover="handler(this)">
function handler (liElement) {
alert(liElement.previousSibling); // Vorheriger Geschwisterknoten
// Kann ggf. ein Textknoten sein, wenn zwischen den li-Tags ein Zeilenumbruch steht, dann suchst du mit einer Schleife das vorherige li-Element, sofern existent
}Bevor ich dir jetzt ein genaues Codebeispiel bastle, brauche ich erstmal dein Feedback.
Mathias
-
Hi,
for(var i = 0; i < document.getElementById('uli').getElementsByTagName("li").length; i++)
{
var gesuchte_Link_Farbe = document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.color;
if (gesuchte_Link_Farbe == "#ffffff")
{
document.getElementById('uli').getElementsByTagName("li")[i].getElementsByTagName("a")[0].style.background = 'url(neu1.jpg)';
var davor = parseInt(i-1);
document.getElementById('uli').getElementsByTagName("li")[davor].getElementsByTagName("a")[0].style.background = 'url(neu2.jpg)';Es ist ziemlich ineffizient, die Element-Listen immer wieder zu ermitteln.
Speicher Dir einmal am Anfang die Referenz.
Da bei Dir außerdem jedes li genau ein a enthält, ist das getElementsByTagName("li") m.E. komplett überflüssig.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.