tag:forum.selfhtml.org,2005:/self Probleme mit dem dynamischen Verändern von CSS Styles – SELFHTML-Forum 2009-08-01T16:47:28Z https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383233#m1383233 int0xicated 2009-07-28T11:26:18Z 2009-07-28T11:26:18Z Probleme mit dem dynamischen Verändern von CSS Styles <p>Hallo liebes Forum,</p> <p>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:<br> 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.</p> <p>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:</p> <pre><code class="block language-javascript"> <span class="token keyword">function</span> <span class="token function">chanceCSS</span><span class="token punctuation">(</span><span class="token parameter">pagetype</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pagetype <span class="token operator">==</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">{</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#F2E7E7'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pagetype <span class="token operator">==</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#fbf6ea'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span><span class="token punctuation">(</span>pagetype <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">.</span><span class="token function">item</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#d8e5d8'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Durch das Debuggen sehe ich, dass jeweils immer die richtige Nummer (pagetype) übergeben wurde und auch der Javascript Code ausgeführt wird.</p> <p>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.</p> <p>Danke für jede Hilfe!</p> <p>LG,</p> <p>Martin</p> https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383235#m1383235 Cheatah 2009-07-28T12:16:08Z 2009-07-28T12:16:08Z Probleme mit dem dynamischen Verändern von CSS Styles <p>Hi,</p> <blockquote> <p>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</p> </blockquote> <p>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.</p> <p>Cheatah</p> <div class="signature">-- <br> X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|<br> X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html<br> X-Will-Answer-Email: No<br> X-Please-Search-Archive-First: Absolutely Yes </div> https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383234#m1383234 Cybaer cybaer@binon.net http://Coding.binon.net 2009-08-01T16:47:28Z 2009-08-01T16:47:28Z Probleme mit dem dynamischen Verändern von CSS Styles <p>Hi,</p> <blockquote> <p>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?</p> </blockquote> <p>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.</p> <p>Möglicherweise wird also bei dem, was nicht klappt, nicht das überschrieben, was Du meinst, das überschrieben wird.</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Zweck des Disputs oder der Diskussion soll nicht der Sieg, sondern der Gewinn sein.<br> (Joseph Joubert, Schriftsteller)<br> </div>