Probleme mit dem dynamischen Verändern von CSS Styles – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Probleme mit dem dynamischen Verändern von CSS Styles Tue, 28 Jul 09 11:26:18 Z https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383233#m1383233 https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383233#m1383233 <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> Probleme mit dem dynamischen Verändern von CSS Styles Tue, 28 Jul 09 12:16:08 Z https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383235#m1383235 https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383235#m1383235 <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> Probleme mit dem dynamischen Verändern von CSS Styles Sat, 01 Aug 09 16:47:28 Z https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383234#m1383234 https://forum.selfhtml.org/self/2009/jul/28/probleme-mit-dem-dynamischen-veraendern-von-css-styles/1383234#m1383234 <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>