Mehrere Elemente gleiche Id/name verändern

[Zeddix]

Hallo liebe Community,
folgendes Problem:
Ich habe einige <td>-Tags mit der gleichen Id oder auch Namen ausgestattet.
Fährt man nun über einen <img>-Tag mit der Maus sollen alle <td>-Tags gleicher bestimmter Id ihren Sytle verändern.

Ich selbst hab große Probleme mit der Schreibweise von Javascript und hab daher Schwierigkeiten dies umzusetzen:

<img onmouseover="hinzufügen von Style attribut" onmouseout="entferne Sytle attribut">

Dabei ist das Problem für mich das es halt bei allen ID gemacht werden soll.... Für einzelne müsste es ja so umzusetzen sein

document.getElementById('item1').setAttribute("style","mein css Sylte");  

Wie kann ich das für alle Elemente gleicher Id umsetzen? Oder müsste das schon so klappen?

Gruß Zeddix

[MudGuard]

Hi,

Ich habe einige <td>-Tags mit der gleichen Id oder auch Namen ausgestattet.

td-Elemente haben kein name-Attribut.
Und für id-Attribute gilt das Highlander-Prinzip: es kann nur einen geben - sprich: es kann keine 2 Elemente mit gleicher ID geben.

cu,
Andreas

[Gunnar Bittersmann]

@@Zeddix:

nuqneH

Ich habe einige <td>-Tags mit der gleichen Id oder auch Namen ausgestattet.

Beides ist falsch: 'td'-Elemente dürfen keinen 'name'-Attribute haben und IDs müssen dokumentweit eindeutig sein (sonst wären es ja keine IDs).

Möchtest du 'class'-Attribute verwenden?

Qapla'

[Zeddix]

Danke für die Antworten :) Also, ich möchte das Problem lösen gg. Das 'class'-Attribute wäre auch ok, jedoch gibt es bei jedem <td>-Tag bereits ein class-attibute welches "zufällig" ist. Man könnte ja zwei Klassen vergeben: <td class="random idclass"> Dann müsste man halt nur die Klasse "idclass" herausfiltern, geht das?

Zeddix

[Felix Riesterer]

Lieber Zeddix,

Also, ich möchte das Problem lösen *gg*.

gut.

Das 'class'-Attribute wäre auch ok, jedoch gibt es bei jedem <td>-Tag bereits ein class-attibute welches "zufällig" ist.
Man könnte ja zwei Klassen vergeben:
<td class="random idclass">

Richtig!

Dann müsste man halt nur die Klasse "idclass" herausfiltern, geht das?

Mit getElementsByClassName() findet alle Elemente, die eine bestimmte Klasse haben, auch wenn sie mehrere Klassen haben und die gesuchte dabei ist. Wie Du diese nicht im Standardumfang von JavaScript enthaltene Funktion nutzen kannst, sagt Dir entweder das Forumsarchiv oder Google.

Liebe Grüße,

Felix Riesterer.

[Zeddix]

Danke dir, es funktioniert, zumindest bis jetzt ;)!

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Wie Du diese nicht im Standardumfang von JavaScript enthaltene Funktion [getElementsByClassName()] nutzen kannst, sagt Dir entweder das Forumsarchiv oder Google.

Und warum man diese Funktion nicht nutzen sollte, wenn es denn auch anders geht, sagt dir auch das Forumsarchiv oder Google.

Zum einen ist getElementsByClassName() unperformant, zum anderen widerspricht das Stylen von Elementen mit JavaScript der Trennung von Präsentationsschicht und Verhaltensschicht.

Besser ist es, beim Event 'mouseover' über dem Bild einem Elternelement der 'td' ('table' könnte sich anbieten) eine Klasse "highlighted" zu verpassen und bei 'mouseout' wieder wegzunehmen.

Die Formate der 'td'-Elemente stehen für 'mouseout' und für 'mouseover' dort, wo sie hingehören: im Stylesheet.

td { /* sich nicht ändernde Formate und Formate bei 'mouseout' */ }  
.highlighted td { /* davon abweichende Formate bei 'mouseover' */ }

Ich wüsste gerade nicht, wozu  man getElementsByClassName() wirklich brauchen sollte. Für dynamische Styleänderungen ganz sicher nicht.

Qapla'

[Felix Riesterer]

Lieber Gunnar,

Und warum man diese Funktion nicht nutzen sollte, wenn es denn auch anders geht, sagt dir auch das Forumsarchiv oder Google.

mir brauchst Du das nicht zu sagen. Ich benutze diese Funktion nicht, um style-Eigenschaften zu verändern. Ich benutze sie in aller Regel, um die Dokumentstruktur zu verändern. Ein Beispiel, bei dem ich das im größeren Stil tue ist mein brachliegendes Grußkartenprojekt.

Ich wüsste gerade nicht, wozu  man getElementsByClassName() wirklich brauchen sollte.

Ich schon!

Für dynamische Styleänderungen ganz sicher nicht.

Richtig. Sondern für komplexere Animationen und deren Umbauten am DOM (siehe oben).

Liebe Grüße,

Felix Riesterer.

[Cybaer]

Hi,

Ich wüsste gerade nicht, wozu  man getElementsByClassName() wirklich brauchen sollte.

Natürlich nicht. Alle Browserprogrammierer sind halt im Vergleich zu dir Volltrottel. Bauen ständig Dinge ein, die niemand braucht und ganz bestimmt niemand je nutzen wird. Dafür lassen sie Dinge weg, die ja so wichtig sind (XHTML 2 z.B.).

Hast Du dir eigentlich chinesische Schriftzeichen auf den Nacken (oder den Steiß in XL?) tätowieren lassen, die übersetzt lauten: "Alle doof, außer ich!" >:->

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

Natürlich nicht. Alle Browserprogrammierer sind halt im Vergleich zu dir Volltrottel. Bauen ständig Dinge ein, die niemand braucht und ganz bestimmt niemand je nutzen wird. […] "Alle doof, außer ich!" >:->

Hast du außer polemischem Blabla noch was auf Tasche?

Qapla'

[Cybaer]

Hi,

Hast du außer polemischem Blabla noch was auf Tasche?

Klar. Aber für dich reicht das blabla! =8->

Gruß, Cybaer

[getElementsByClassName]

Mit getElementsByClassName() findet alle Elemente, die eine bestimmte Klasse haben, auch wenn sie mehrere Klassen haben und die gesuchte dabei ist. Wie Du diese nicht im Standardumfang von JavaScript enthaltene Funktion nutzen kannst

getElementsByClassName wird mittlerweile von Firefox, Opera, Safari und Chrome nativ unterstützt. Nur der IE bedarf einer händischen Umsetzung. Unter IE8 ist das aber mit document.querySelectorAll('.klasse') schnell erledigt. Lediglich in älteren Browsern muss man mit getElementsByTagName("*") arbeiten und die className-Eigenschaft durchsuchen. (Gut, XPath ginge auch noch.)

[Kai345]

[latex]Mae  govannen![/latex]

getElementsByClassName wird mittlerweile von Firefox, Opera, Safari und Chrome nativ unterstützt. Nur der IE bedarf einer händischen Umsetzung. Unter IE8 ist das aber mit document.querySelectorAll('.klasse') schnell erledigt.

Sollte man generell bevorzugen. Man kann ja einfach abfragen, ob document.querySelectorAll() vorhanden ist und nur auf gEBCN zurückgreifen, falls dies nicht so ist.

Lediglich in älteren Browsern muss man mit getElementsByTagName("*") arbeiten ...

Aber bitte wiederum nicht _zu_ alt, IE der 5-er Reihe sind dazu nicht in der Lage[so man sie denn unterstützen möchte/muß]. Die sagen nämlich bei getElementsByTagName("*") »Nö, nix gefunden«. Bei Angabe eines Tag-Names geht es. Typisch Microschrott mal wieder.

Die getElementsByClassName-Funktion, die ich vor einiger Zeit hier gepostet habe, ist entsprechend erweitert.

Aber wie Gunnar schon sagte: gEBCN sollte nur verwendet werden, wenn es sein muß, z.B. wenn man Eigenschaften manipulieren will, bei styles sollte die Klassen-Erweiterung eines Vorfahren und entsprechende Notation im Stylesheet immer bevorzugt werden.

Cü,

Kai

[Cybaer]

Hi,

Aber bitte wiederum nicht _zu_ alt, IE der 5-er Reihe sind dazu nicht in der Lage[so man sie denn unterstützen möchte/muß]. Die sagen nämlich bei getElementsByTagName("*") »Nö, nix gefunden«. Bei Angabe eines Tag-Names geht es. Typisch Microschrott mal wieder.

Dafür gibt es ja document.all. Die (erfahreneren) Programmierer, die getElementsbyClassName() umsetzten, wissen das auch. Die beste, übliche Lösung, die man im Netz findet, unterstützt selbstverständlich auch noch den IE 5 ...

Gruß, Cybaer

[Gunnar Bittersmann]

@@Zeddix:

nuqneH

Fährt man nun über einen <img>-Tag mit der Maus sollen alle <td>-Tags gleicher bestimmter Id ihren Sytle verändern.

Tags?

Was haben denn die 'td' gemeinsam? Doch nicht etwa, dass sie in derselben Zeile stehen? In dem Fall möchtest du vielleicht gar nicht die Stile der 'td' ändern, sondern den der 'tr'.

Qapla'

[Cybaer]

Hi,

Wie kann ich das für alle Elemente gleicher Id umsetzen?

• Du kannst alle Elemente eeiner Klasse suchen udn die Stile einzeln umsetzen
• Du kannst eine fortlaufende ID vergeben mit fixem Teil ("ID1", "ID2", ...) und dann nach "ID*" suchen und die Stile setzen.
• Du kannst ein eigenes Attribut vergeben (<td myownid="ID1">) und darüber ansprechen
• Wenn die Werte vorher bekannt sind, kannst die Stile statisch in CSS definieren und dann z.B. die Klasse des TABLE-Elements wechseln.
• Du kannst das CSS selbst ändern, und z.B. sagen, daß für die Elemente die über CSS-Regel x angesteuert werden, anders dargestellt werden sollen, weil Du x umdefinierst

Viele Wege führen nach Rom - ich hoffe, daß ich nichts vergessen habe ...

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

• Du kannst alle Elemente eeiner Klasse suchen udn die Stile einzeln umsetzen

Unperformant.

• Du kannst eine fortlaufende ID vergeben mit fixem Teil ("ID1", "ID2", ...) und dann nach "ID*" suchen und die Stile setzen.

Unperformant.

• Du kannst ein eigenes Attribut vergeben (<td myownid="ID1">) und darüber ansprechen

In HTML ist es nicht möglich, eigene Attribute zu vergeben. Ein HTML-Parser hat keine Veranlassung, für in HTML nich existierende Attribute im DOM Eigenschaften anzulegen, auf die man mit JavaScript zugreifen kann. Das mag in manchen Browsern funktionieren; verlassen würde ich mich darauf nicht.

• Wenn die Werte vorher bekannt sind, kannst die Stile statisch in CSS definieren und dann z.B. die Klasse des TABLE-Elements wechseln.

Aha!!

• Du kannst das CSS selbst ändern, und z.B. sagen, daß für die Elemente die über CSS-Regel x angesteuert werden, anders dargestellt werden sollen, weil Du x umdefinierst

Unperformant.

Viele Wege führen nach Rom - ich hoffe, daß ich nichts vergessen habe ...

Das hast du: die Einschätzung, welcher Weg denn am besten einzuschlagen wäre.

Qapla'

[Cybaer]

Hi,

Ein HTML-Parser hat keine Veranlassung, für in HTML nich existierende Attribute im DOM Eigenschaften anzulegen, auf die man mit JavaScript zugreifen kann. Das mag in manchen Browsern funktionieren; verlassen würde ich mich darauf nicht.

Das es in den Browsern praktisch funktioniert, ist die eine Sache. Daß es mit HTML5 auch so definiert wurde, und damit zu erwarten ist, daß die zukünftigen Browser diese, nunmehr Pflichteigenschaft, nicht wieder "verlernen", ist wohl sehr wahrscheinlich.

Aber das hat man dir ja hier schon mehrfach geantwortet ...

... und zu deinem anderen Schwachsinn, äußere ich mich schon gar nicht mehr. =:-)

Gruß, Cybaer

[Gunnar Bittersmann]

@@Cybaer:

nuqneH

Daß es mit HTML5 auch so definiert wurde

Du hast Probleme mit der deutschen Sprache und kannst die Präteritum- und Futurformen nicht auseinanderhalten?

Qapla'

[Cybaer]

Hi,

Du hast Probleme mit der deutschen Sprache und kannst die Präteritum- und Futurformen nicht auseinanderhalten?

Lieber so, als wenn man nicht mehr zw. Realität und eigener Phantasiewelt unterscheiden kann. =8->

Gruß, Cybaer