27. februar 2010 - 16:36Der er
3 kommentarer og 1 løsning
Dynamisk ænding af CSS ?
Hej, jeg spekulerer på muligheden for at ændre på en stribe CSS-deklarationer - dynamisk.
Ideen er at give brugerne mulighed for at vælge imellem forskellige farve-skemaer: hvid tekst på sort baggrund med grønne rammer ELLER rød tekst på hvid baggrund med blå rammer ELLER ...
Jeg har dog ikke "lyst" til at vedligeholde en bunke forskellige style-sheets. - ligesom det ville være cool at give brugerne mulighed for at designe deres egen palette...
Men hvordan - er der nogen som har en god idé ?
Jeg har en JS-funktion som kan ændre på CSS dynamisk, men den "ser langsom ud"... (sig til, hvis du vil se funktionen)
hvis brugere skal kunne bruge det - så skal du gemme deres valg i cookies. Ellers taber de jo alt når sitet forlades.
Synes godt om
Slettet bruger
27. februar 2010 - 17:36#3
Funktionen: function modifyCSS(classN,element,value) { var cssRules;
var added = false; for (var S = 0; S < document.styleSheets.length; S++) { if (document.styleSheets[S]['rules']) cssRules = 'rules'; else if (document.styleSheets[S]['cssRules']) cssRules = 'cssRules'; else alert("Øv, din browser kan ikke modificere CSS dynamisk :(")
for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) if (document.styleSheets[S][cssRules][R].selectorText == classN) if(document.styleSheets[S][cssRules][R].style[element]) { document.styleSheets[S][cssRules][R].style[element] = value; added=true; break; }
if(!added) if (document.styleSheets[S].insertRule) document.styleSheets[S].insertRule(classN+' { '+element+': '+value+'; }',document.styleSheets[S][cssRules].length); else if (document.styleSheets[S].addRule) document.styleSheets[S].addRule(classN,element+': '+value+';'); else alert("Øv, din browser kan ikke tilføje CSS dynamisk :(") } }
Selvfølgelig skal det gemmes - i deres stamdata-record i MySQL.
En mulighed er så: i onLoad, at køre ovenstående funktion på de class'es som skal modificeres. Men jeg er bange for at det vil gå langsomt...
Et alternativ: At style-sheet'et faktisk er en PHP-fil som modificeres inden browseren ser den - men så ryger muligheden for at cache...
Synes godt om
Slettet bruger
28. februar 2010 - 10:52#4
Det bliver et kompromis: I <head><script> = Før siden vises med standard CSS + Uden at belaste serveren yderligere
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.
