Printable View
Ho la necessità di cambiare alcune proprietà css tramite javascript. Finché devo cambiare proprietà di selettori so come fare:
ma quando devo cambiare proprietà di pseudoclassi? per esempio a:link a:hover e a:visited :confused:Codice:document.body.style.backgroundColor
Mi scuso in anticipo se non è la sezione corretta, però riguarda sia css sia javascript e il vero problema che ho è in javascript :crycry:
Puoi modificare i fogli di stile della pagina tramite l'interfaccia CSSStyleSheet, per poterti aiutare di più serve però sapere cosa vuoi fare esattamente.
intanto il sito è campocolico.altervista.org
il problema si presenta nella sezione preferenze: in poche parole do' all'utente la possibilità di scegliere colore di sfondo, colore del testo, carattere del testo (e fin qui tutto bene) colore del link, del link visitato e del link attivo(è qua che ho problemi), utilizzando css, javascript e cookie in questo modo:
faccio inserire all'utente i parametri desiderati e li salvo con i cookie in questo modo
Ho già controllato i cookie li scrive correttamente (fin qua funziona)Codice:<form name="impostazioni">
<input type="text" name="sfondo" value="#ffffc2"> <a href="javascript:scriviCookie('sfondo',document.impostazioni.sfondo.value,'70000')"> Applica</a>    Colore di Sfondo<br>
<input type="text" name="testo" value="#552100"><a href="javascript:scriviCookie('testo',document.impostazioni.testo.value,'70000')"> Applica</a>    Colore del testo<br>
<input type="text" name="carattere" value="Segoe Print"><a href="javascript:scriviCookie('carattere',document.impostazioni.carattere.value,'70000')"> Applica</a>    Carattere<br>
<input type="text" name="alink" value="#301500"><a href="javascript:scriviCookie('alink',document.impostazioni.alink.value,'70000')"> Applica</a>    Colore Link nuovo<br>
<input type="text" name="avisited" value="#412000"><a href="javascript:scriviCookie('avisited',document.impostazioni.avisited.value,'70000')"> Applica</a>    Colore Link visitato<br>
<input type="text" name="ahover" value="#00603c"><a href="javascript:scriviCookie('ahover',document.impostazioni.ahover.value,'70000')"> Applica</a>    Colore Link al passaggio del mouse<br>
</form>
poi ad ogni pagina faccio cambiare lo stile predefinito se c'è presenza del cookie specifico (settato dall'utente), tramite questo file Javascript esterno
e qua funziona per i primi tre ma non per gli altri tre, perchè i primi sono selettori. Le pseudo-classi invece non so proprio come cambiarle dinamicamente, è proprio questo il dilemmaCodice:document.body.style.backgroundColor=leggiCookie("sfondo");
document.body.style.color=leggiCookie("testo");
document.body.style.fontFamily=leggiCookie("carattere");
document.alink.style.color=leggiCookie("alink");
document.avisited.style.color=leggiCookie("avisited");
document.ahover.style.color=leggiCookie("ahover");
Stai facendo un po' di confusione, non è l'oggetto document che ti permette di manipolare i fogli di stile. E comunque usando il codice che hai scritto nel primo messaggio non viene creata una nuova regola nel CSS per l'elemento body, ma viene solo modificato lo stile proprio dell'elemento, è come se modificassi il valore dell'attributo style.
Tu invece vuoi aggiungere delle regole e per farlo devi usare l'interfaccia che ti ho indicato, per esempio così:Ti devi però assicurare che al momento dell'esecuzione dello script sia già stato aggiunto al documento un foglio di stile CSS.Codice HTML:<script type="text/javascript">
document.styleSheets[0].insertRule(":link{color: #000}", 1);
document.styleSheets[0].insertRule(":visited{color: #CCC}", 1);
document.styleSheets[0].insertRule(":link:hover, :visited:hover{text-decoration: none;}", 1);
</script>
ah, scusa, mi ero dimenticato di dire che il foglio di stile esiste già (è uno predefinito ma non piace a tutti), e io vorrei far cambiare a chi non piace la visualizzazione del sito: in poche parole vorrei che si sostituisse il valore predefinito con quello scelto dall'utente.
Il CSS che viene caricato è
Forse c'è un modo più semplice, ma io non l'ho trovato (non sono espertissimo).Codice:html {
margin-up: .2cm;
margin-left: .2cm;
margin-right: .2cm;
}
body {
background-color: #ffffc2;
color: #552100;
font-family: Segoe Print, Verdana, Arial, sans-serif;
font-size: 17
}
a:link{
text-decoration: none;
color: #301500 ;
}
a:visited{
text-decoration: none;
color: #412000;
}
a:hover{
color: #00603c;
text-decoration: none;
embed {float: left;}
}
Alla fine vorrei solo che l'utente scelga per se i colori del sito (sfondo, carattere, link, link attivo e link visitato) senza creare io infiniti css con le infinite combinazioni. Non mi serve tanto per scopo didattico (in quanto non le abbiamo nemmeno iniziate queste cose in informatica, solo algoritmi) ma per rendere migliore l'estetica del sito, in questo caso (se riuscite) mi andrebbe bene anche la "pappetta pronta", anche se sarebbe meglio capire anche. Spero solo di essermi spiegato bene
Grazie ancora per la disponibilità a cercare di capire una crapa di legno come la mia :wink:
L'esempio che ti ho scritto dovrebbe funzionare, l'hai priovato?
no, non mi funziona (è già online puoi provare anche tu stesso)
Però almeno la console non mi segna più errori
secondo voi c'è un'altra soluzione per raggiungere quello scopo?
io sono arrivato a questa, ma dato che non funziona per tutto mi sa che devo cambiare