und CSS: Eigenschaften VIELER Elemente ändern

[Bodo Thiesen]

Problem:

<table ...>
~375 mal <tr>
pro <tr> etwa ~250 mal <td>

jeweils drin ist ein <a href=...><img src=.../></a>

Das img will ich eliminieren und durch background-image im a-Tag ersetzen - das stellt ansich kein Problem dar. Jetzt will ich aber in einem anderem Frame dem Benutzer die Möglichkeit geben, Einstellungen vorzunehmen, aufgrund derer die Bilder bestimmter (aber einiger - so Größenordnung 5k-10k) a-Tags durch andere ersetzt werden (es geht hier um Highlightning). Eine for-Schleife könnte das Problem zwar lösen, aber eine for-Schleife über 90k Elemente, ich weiß nicht so recht ... die Seite ist so schon extrem Träge. Die a-Tags kann ich alle mit class-Attributen versehen, so daß ich für jede Gruppe von A-Tags, die einzeln modifizierbar sein soll einen eigenen Namen habe, aber kann ich dann die Eigenschaften z.B. von a.grupp1 via JavaScript ändern?

Also meine Idee war jetzt:

<style>
a.gruppe1 { background-image:url(Bild1-grayed.png) }
a.gruppe2 { background-image:url(Bild2-grayed.png) }
a.gruppe3 { background-image:url(Bild3-grayed.png) }
a.gruppe4 { background-image:url(Bild4-grayed.png) }
[...]
</style>

kann ich via JavaScript das Bild1-grayed.png jetzt durch Bild1-highlight.png ersetzen, so daß der Browser das automatisch für alle nutzenden Elemente (Tabellenzellen) übernimmt, ohne über alle Tabellenzellen iterieren zu müssen? (Die Alternative wäre dann wohl nur noch Reload - dauert ein paar Minuten - wegen dem Rendern der Tabelle - oder ein AJAX-Ansatz, d.h. das Frame mit den Einstellungen wird zum Server geGETtet, und man bekommt als Antwort ein JS, das die Änderungen vornimmt, nur dafür brauche ich dann wieder ein vollständiges Session-Management + ich muß mir den Zustand der Client-Anzeige merken - immerhin eine 8MB html-Datei, Tendenz steigend ...)

Gruß, Bodo

[Cheatah]

Hi,

Die a-Tags kann ich alle mit class-Attributen versehen, so daß ich für jede Gruppe von A-Tags, die einzeln modifizierbar sein soll einen eigenen Namen habe, aber kann ich dann die Eigenschaften z.B. von a.grupp1 via JavaScript ändern?

das kannst Du. Ebenso kannst Du mit JavaScript der Tabelle eine Klasse verpassen.

Cheatah

[Bodo Thiesen]

Die a-Tags kann ich alle mit class-Attributen versehen, so daß ich für jede Gruppe von A-Tags, die einzeln modifizierbar sein soll einen eigenen Namen habe, aber kann ich dann die Eigenschaften z.B. von a.grupp1 via JavaScript ändern?

das kannst Du.

Super :)

Wäre jetzt nur hilfreich gewesen, wenn Du kurz skizziert hättest, wie es geht.

Ebenso kannst Du mit JavaScript der Tabelle eine Klasse verpassen.

Was mich allerdings nicht weiter bringen würde ...

Gruß, Bodo

[Cheatah]

Hi,

das kannst Du.
Super :)
Wäre jetzt nur hilfreich gewesen, wenn Du kurz skizziert hättest, wie es geht.

das mag sein, aber es wäre unnötig schwer gewesen, Dich auf die Fährte der document.styleSheets zu bringen.

Ebenso kannst Du mit JavaScript der Tabelle eine Klasse verpassen.
Was mich allerdings nicht weiter bringen würde ...

Warum nicht?

Cheatah

[Bodo Thiesen]

Wäre jetzt nur hilfreich gewesen, wenn Du kurz skizziert hättest, wie es geht.

das mag sein, aber es wäre unnötig schwer gewesen, Dich auf die Fährte der document.styleSheets zu bringen.

Vor allem, weil sich dazu so unglaublich viel in SelfHTML zu findet. Aber egal, Cybaer hat ja inzwischen eine brauchbare Antwort geliefert.

Ebenso kannst Du mit JavaScript der Tabelle eine Klasse verpassen.
Was mich allerdings nicht weiter bringen würde ...

Warum nicht?

Weil Du mein Problem nicht verstanden hast.

Gruß, Bodo

[Gunnar Bittersmann]

Hello out there!

Weil Du mein Problem nicht verstanden hast.

Oh oh, davon ist bei Cheatah nicht auszugehen. Du hast allerdings seine Antwort nicht verstanden, IMHO.

Ebenso kannst Du mit JavaScript der Tabelle eine Klasse verpassen.
Was mich allerdings nicht weiter bringen würde ...
Warum nicht?

Lies: „Doch, das bringt dich weiter.“

Du kennst den Nachfahrenselektor?

See ya up the road,
Gunnar

[Cybaer]

Hi,

Weil Du mein Problem nicht verstanden hast.
Oh oh, davon ist bei Cheatah nicht auszugehen. Du hast allerdings seine Antwort nicht verstanden, IMHO.

Also ich verstehe es auch nicht! %-)

Wenn ich einem User die Möglichkeit geben möchte, einzelne Styles selbst nach Belieben zu verändern, wie kann ich dann mit className und Kindselektor arbeiten?

Das würde doch nur klappen, wenn das alles vorher genau definiert ist. Also wenn man z.B.

.tableStyles0 a.gruppe1 { background-image:url(pic0.png); }
.tableStyles0 a.gruppe2 { background-image:url(pic0.png); }
.tableStyles0 a.gruppe3 { background-image:url(pic0.png); }

austauschen möchte gegen

.tableStyles1 a.gruppe1 { background-image:url(pic1.png); }
.tableStyles1 a.gruppe2 { background-image:url(pic1.png); }
.tableStyles1 a.gruppe3 { background-image:url(pic1.png); }

macht man das z.B. mit document.getElementByTagName("table")[0].className="tableStyle1";

Aber so wie ich Bodo verstehe, kann der User *einzeln* selbst selektieren, was er haben möchte. Also z.B.

a.gruppe1 { background-image:url(pic0.png); }
a.gruppe2 { background-image:url(pic1.png); }
a.gruppe3 { background-image:url(pic3.png); }

Anyway: Jetzt sollten beide Möglichkeiten erläutert sein - kann sich also jeder aussuchen, wie er's braucht ... ;-)

Gruß, Cybaer

[wahsaga]

hi,

Wenn ich einem User die Möglichkeit geben möchte, einzelne Styles selbst nach Belieben zu verändern, wie kann ich dann mit className und Kindselektor arbeiten?

Wer hatte das vor?
Der Frager meinem Verständnis seiner Aufgabenstellung nach jedenfalls nicht.

Für Elemente mit einer bestimmten Klasse sollte Hintergrundbild1 durch Hintergrundbild2 ausgetauscht werden.
Dass diese Bilder bzw. ihre Adressen _völlig frei_ vom Nutzer auszuwählen sind, vermochte ich nicht herauszulesen - sondern, dass er aus einer definierten Menge wählen kann. Und eben diese lässt sich auch in statischen CSS-Regeln hinterlegen, deren Zuständigkeit durch Wechsel von Selektoren ausgetauscht werden kann.

Das würde doch nur klappen, wenn das alles vorher genau definiert ist.

Jepp, so hab' ich die Anforderung verstanden.

gruß,
wahsaga

[Cybaer]

Hi,

Für Elemente mit einer bestimmten Klasse sollte Hintergrundbild1 durch Hintergrundbild2 ausgetauscht werden.
Dass diese Bilder bzw. ihre Adressen _völlig frei_ vom Nutzer auszuwählen sind, vermochte ich nicht herauszulesen - sondern, dass er aus einer definierten Menge wählen kann.

Ja, aber nicht notwendigerweise immer für alle Elemente gleichzeitig, sondern eben nur selektiv für einzelne Gruppen.

Und eben diese lässt sich auch in statischen CSS-Regeln hinterlegen, deren Zuständigkeit durch Wechsel von Selektoren ausgetauscht werden kann.

Wenn man vorher nicht weiß, für welche Gruppen sich der Anwender entscheiden wird, muß man halt eine Anzahl n! an passenden Styles statisch vorbereiten. Klingt für mich a) nicht elegant und b) steigt die Anzahl der Kombinationen ja auch noch fakultativ. Das wäre also nur für Anwendungen mit wenig Gruppen (und entsprechend wenig Kombinationen) IMHO tolerabel.

Das würde doch nur klappen, wenn das alles vorher genau definiert ist.
Jepp, so hab' ich die Anforderung verstanden.

Und ich eben nicht. :)

Ich weiß nicht, ob ich oder ihr Bodo richtig verstanden habt (oder ob er sich überhaupt richtig ausgedrückt hat ;-)), aber ich halte meine Interpretation zumindest für *möglich*, oder?

Gruß, Cybaer

[Cheatah]

Hi,

Vor allem, weil sich dazu so unglaublich viel in SelfHTML zu findet.

das Netz ist groß. Abgesehen davon halte ich es nach wie vor nicht für den richtigen Weg, bestehende CSS-Regeln zu ändern.

Aber egal, Cybaer hat ja inzwischen eine brauchbare Antwort geliefert.

Meiner Ansicht nach völliger Overkill, der nicht nur unnötig ist, sondern IMHO sogar kontraproduktiv.

Ebenso kannst Du mit JavaScript der Tabelle eine Klasse verpassen.
Was mich allerdings nicht weiter bringen würde ...
Warum nicht?
Weil Du mein Problem nicht verstanden hast.

"Irrtum", sprach der Igel, und stieg von der Scheuerbürste.

Cheatah

[Cybaer]

Hi,

Meiner Ansicht nach völliger Overkill, der nicht nur unnötig ist, sondern IMHO sogar kontraproduktiv.

Ich würde hier vermutlich auch eine for-Schleife bevorzugen und direkt ändern.

Eine CSS-Regeländerung hätte allerdings z.B. den Vorteil, daß man die Styles nur für die Bildschirmausgabe ändern kann, während z.B. die Druckausgabe bei einem dem Medium angepaßten Layout bleibt (eine direkte Änderung wirkt ja auf alle Medien).

Aber das kann man, ohne das Projekt zu kennen, nicht sagen ...

Gruß, Cybaer

PS: Und da Opera Regeländerungen mittlerweile auch versteht ... :-))

[Cheatah]

Hi,

Meiner Ansicht nach völliger Overkill, der nicht nur unnötig ist, sondern IMHO sogar kontraproduktiv.
Ich würde hier vermutlich auch eine for-Schleife bevorzugen und direkt ändern.

ich würde einfach einem passenden umgebenden Element eine Klasse verpasse (wie der Schwob babbelt).

Eine CSS-Regeländerung hätte allerdings z.B. den Vorteil, daß man die Styles nur für die Bildschirmausgabe ändern kann, während z.B. die Druckausgabe bei einem dem Medium angepaßten Layout bleibt (eine direkte Änderung wirkt ja auf alle Medien).

Naja, das lässt sich allerdings auf vielerlei halb-triviale Weise erreichen :-)

PS: Und da Opera Regeländerungen mittlerweile auch versteht ... :-))

Opera ist trotzdem ein Rotzendreck. Die 9.0 beta hat ein Layout wunderbar umgesetzt, und die 9.0 final hat plötzlich die <select>s, die größtenteils unverändert waren, zu klein für den enthaltenen Text dargestellt. Das hat man bei Opera offenbar ständig: Es wird irgendwas verbessert, und plötzlich gehen an ganz anderer Stelle Dinge nicht mehr, die vorher wunderbar funktionierten. Aber zwischen einer Beta und einer Final ...?

Cheatah

[Der Martin]

Hallo,

das kann ich doch so nicht unkorrigiert stehenlassen! ;-)

[...] einem passenden umgebenden Element eine Klasse verpasse (wie der Schwob babbelt).

Auf koin Fall!
De Hesse babbelt, vielleicht au no de Pälzer, aber d'r Schwob schwätzt.

Ciao,
 Martin

[Cybaer]

Hi,

De Hesse babbelt, vielleicht au no de Pälzer, aber d'r Schwob schwätzt.

De Pälzer red Stuß! >;->

Gruß, Cybaer

[Cybaer]

Hi,

ich würde einfach einem passenden umgebenden Element eine Klasse verpasse (wie der Schwob babbelt).

:)

Das kommt eben IMHO drauf an, wie die Aufgabenstellung genau aussieht (s. Parallelpostings von mir).

Oder siehst Du eine Möglichkeit, mit dieser Methode dem User zu ermöglichen, z.B. zu gruppe1 & 3 ein anders Hintergrundbild zu setzen, als zu gruppe2 & Rest (wobei "Rest", gekennzeichnet durch "..." ja in der Größe offen geblieben ist)? Ich sehe das nicht.

Naja, das lässt sich allerdings auf vielerlei halb-triviale Weise erreichen :-)

Auch wahr. :-)

Opera ist trotzdem ein Rotzendreck.

Ts, da habe ich einmal eine gute Meinung vom Opera ... =:-o

Mich ärgert mom. nur, daß er immer noch ggf. (Verschluck-)Probleme hat beim letter-spacing. Aber das war wohl schon immer so. >:->

Na ja, nobody is perfect ...

Gruß, Cybaer

[Der Martin]

Hallo,

"Irrtum", sprach der Igel, und stieg von der Scheuerbürste.

"Geschmackssache", sagte der Affe und biss in die Seife.

*scnr*
 Martin

[Cheatah]

Hi,

"Geschmackssache", sagte der Affe und biss in die Seife.

es ist ein Irrtum, hierin einen SOAP-Request zu sehen.

*scnr*

Dito ;-)

Cheatah

[at]

Hallo.

"Geschmackssache", sagte der Affe und biss in die Seife.

es ist ein Irrtum, hierin einen SOAP-Request zu sehen.

Da bräuchte man schon Lux-Augen.
MfG, at

[Cybaer]

Hi,

kann ich dann die Eigenschaften z.B. von a.grupp1 via JavaScript ändern?

Ja - s. Coding: CSS-Regeln (& Stylesheets) auslesen & ändern

kann ich via JavaScript das Bild1-grayed.png jetzt durch Bild1-highlight.png ersetzen,

Mit obiger Funktion: cssrule("a.gruppe1","background-image","Bild1-highlight.png");

Gruß, Cybaer

[Cybaer]

(grummel - zu wenig Schlaf die Nacht)

Mit obiger Funktion: cssrule("a.gruppe1","background-image","Bild1-highlight.png");

Muß natürlich heißen: cssRule("a.gruppe1","background-image","url(Bild1-highlight.png)");

Gruß, Cybaer