int0xicated: Probleme mit dem dynamischen Verändern von CSS Styles

Hallo liebes Forum,

ich habe folgendes Problem ... Ich habe eine Website, die quasi aus 3 Bereichen/Seiten besteht bzw. konkreter werden bestimmte Bereiche einer Seite durch Ajax Funktionalitäten verändert. D.h. Je nach dem welche Seite gerade geladen ist, werden die CSS Styles dementsprechend angepasst - nun habe ich folgendes Problem:
Ich verwende die Bibliothek "Overlib", um Tooltips erstellen zu können - diesen Tooltips sind auch CSS Styles zugeordnet und in einem File tooltips.css gespeichert.

Nun ist es so, dass die 3 Bereiche mittels Tabs aufgerufen werden können - wenn ein Tab geklickt wurde erscheint quasi der neue Bereich/content. Ich habe eine Funktion geschrieben, die "onclick" auf so einen Tab die Styles für die Tooltips verändern soll - das passiert mit der untenstehenden Funktion:

  
  
function chanceCSS(pagetype){  
  
if(pagetype == 3){  
							  
							document.styleSheets.item(0).cssRules.item(6).style.backgroundColor = '#F2E7E7';  
  
}  
						  
if(pagetype == 2){  
							document.styleSheets.item(0).cssRules.item(6).style.backgroundColor = '#fbf6ea';  
}  
  
if(pagetype == 1){  
														document.styleSheets.item(0).cssRules.item(6).style.backgroundColor = '#d8e5d8';  
}  
}

Durch das Debuggen sehe ich, dass jeweils immer die richtige Nummer (pagetype) übergeben wurde und auch der Javascript Code ausgeführt wird.

Das Problem: Die Tooltips werden für die ersten 2 Bereiche richtig/verändert dargestellt, nur für den 3. nicht bzw. dieser hat dann wieder den Style des 1. ... An was kann das liegen? Ich weiß lt Firebug, dass die richtige Javascript Anweisung für den dritten Bereich ausgeführt wird bzw. "pagetype" die richtige Nummer bekommt und auch in die richtige if Anweisung gewechselt wird, darum verstehe ich das nicht so ganz. Ich hoffe ihr könnt mir einen Tipp geben was da schief gelaufen sein könnte.

Danke für jede Hilfe!

LG,

Martin

  1. Hi,

    ich habe folgendes Problem ... Ich habe eine Website, die quasi aus 3 Bereichen/Seiten besteht bzw. konkreter werden bestimmte Bereiche einer Seite durch Ajax Funktionalitäten verändert. D.h. Je nach dem welche Seite gerade geladen ist, werden die CSS Styles dementsprechend angepasst

    warum klassifizierst Du die Elemente, Seiten und Bereiche nicht einfach entsprechend, und nutzt diese Klassifizierungen in CSS-Selektoren? Das hat nebenbei den Vorteil, dass Du nicht Deinen JavaScript-Code anpassen musst, wenn Du mal eine kleine Veränderung am CSS-Code vornimmst. Ganz zu schweigen davon, dass der Browser es um einiges schneller ausführen kann.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
  2. Hi,

    Das Problem: Die Tooltips werden für die ersten 2 Bereiche richtig/verändert dargestellt, nur für den 3. nicht bzw. dieser hat dann wieder den Style des 1. ... An was kann das liegen?

    Daran, daß die stylesheets- & cssRules-Collections nicht den gleichen Inhalt (und Reihenfolge) haben können, wie der orginale Inhalt bzw. die Reihenfolge des geschriebenen CSS-Codes lautet. Es handelt sich stattdessen um eine vom Browser bereits interpretierte Version mit browserspezifischem Inhalt.

    Möglicherweise wird also bei dem, was nicht klappt, nicht das überschrieben, was Du meinst, das überschrieben wird.

    Gruß, Cybaer

    --
    Zweck des Disputs oder der Diskussion soll nicht der Sieg, sondern der Gewinn sein.
    (Joseph Joubert, Schriftsteller)