Cambiare al volo proprietà css con javascript

[Campocolico]

Ho la necessità di cambiare alcune proprietà css tramite javascript. Finché devo cambiare proprietà di selettori so come fare:

document.body.style.backgroundColor

ma quando devo cambiare proprietà di pseudoclassi? per esempio a:link a:hover e a:visited

Mi scuso in anticipo se non è la sezione corretta, però riguarda sia css sia javascript e il vero problema che ho è in javascript

[karl94]

Puoi modificare i fogli di stile della pagina tramite l'interfaccia CSSStyleSheet, per poterti aiutare di più serve però sapere cosa vuoi fare esattamente.

[Campocolico]

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

<form name="impostazioni">
<input type="text" name="sfondo" value="#ffffc2"> <a href="javascript:scriviCookie('sfondo',document.impostazioni.sfondo.value,'70000')"> Applica</a>&nbsp&nbsp&nbsp&nbspColore di Sfondo<br>
<input type="text" name="testo" value="#552100"><a href="javascript:scriviCookie('testo',document.impostazioni.testo.value,'70000')"> Applica</a>&nbsp&nbsp&nbsp&nbspColore del testo<br>
<input type="text" name="carattere" value="Segoe Print"><a href="javascript:scriviCookie('carattere',document.impostazioni.carattere.value,'70000')"> Applica</a>&nbsp&nbsp&nbsp&nbspCarattere<br>
<input type="text" name="alink" value="#301500"><a href="javascript:scriviCookie('alink',document.impostazioni.alink.value,'70000')"> Applica</a>&nbsp&nbsp&nbsp&nbspColore Link nuovo<br>
<input type="text" name="avisited" value="#412000"><a href="javascript:scriviCookie('avisited',document.impostazioni.avisited.value,'70000')"> Applica</a>&nbsp&nbsp&nbsp&nbspColore Link visitato<br>
<input type="text" name="ahover" value="#00603c"><a href="javascript:scriviCookie('ahover',document.impostazioni.ahover.value,'70000')"> Applica</a>&nbsp&nbsp&nbsp&nbspColore Link al passaggio del mouse<br>
</form>

Ho già controllato i cookie li scrive correttamente (fin qua funziona)

poi ad ogni pagina faccio cambiare lo stile predefinito se c'è presenza del cookie specifico (settato dall'utente), tramite questo file Javascript esterno

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");

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 dilemma

[karl94]

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ì:

<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>

Ti devi però assicurare che al momento dell'esecuzione dello script sia già stato aggiunto al documento un foglio di stile CSS.

[Campocolico]

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 è

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;}
}

Forse c'è un modo più semplice, ma io non l'ho trovato (non sono espertissimo).
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

[karl94]

L'esempio che ti ho scritto dovrebbe funzionare, l'hai priovato?

[Campocolico]

no, non mi funziona (è già online puoi provare anche tu stesso)
Però almeno la console non mi segna più errori

[Campocolico]

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