Newsgroup: it.comp.lang.javascript
Titolo: Cambiare stile ad una classe

Ciao,
nelle mie pagine ho qualche decina di div.
Cliccando su un link devo fare in modo che tutto il testo
contenuto in questi div cambi di dimensione.
Ho pensato che si potrebbe attribuire una classe a quei div, ma poi?
Per un div solo farei cosě:
document.getElementById("riquadro1").style.fontSize = '10px'
ma per una classe?
Avete in mente altre soluzioni?
Fatemi sapere, grazie!
Licia

 Ho pensato che si potrebbe attribuire una classe a quei div, ma poi?
Se devi cambiare classe *A TUTTI* i div allora vedi qua:
http://www.criosoftware.it/default17.aspx
Altrimenti specifica meglio il contesto (ci deve essere un modo per poter
differenziare questi div dagli altri...)
-- 
"Emancipate yourselves from mental slavery;
None but ourselves can free our minds"
									    B.M.

 differenziare questi div dagli altri...)
Io li volevo differenziare assegnando loro una classe...
Esempio:
<style type="text/css">
.pippo {font-size:12px; color:blue}
</style>
<div id="menu">
questo testo deve rimanere invariato
</div>
<div id="riquadro1" class="pippo">
blablabla
</div>
<div id="riquadro2" class="pippo">
boh
</div>
<div id="riquadro3" class="pippo">
qualcosa
</div>
Vorrei creare un link "ingrandisci il carattere" cliccando il quale
si ha l'effetto che il carattere di tutti i div che hanno class="pippo"
passa (per esempio) da 12px a 20 ed il colore del testo diventa blu.
Non c'č modo di riferirsi ad una classe
come ci si riferisce ad un Id con document.getElementById?
Altrimenti accetto suggerimenti su un altro modo per differenziare
i div che voglio cambiare dagli altri che voglio mantenere invariati...
Grazie!
L.

 Non è esattamente così...
[CUT]
Non esiste una collection che restituisce gli oggetti con settata una
determinata classe.
Una possibile soluzione è questa:
 
http://www.criosoftware.it/default18.aspx
Un'altra è quella di abilitare/disabilitare stylesheet. 
Vedi se la prima soluzione ti va bene perché, per la seconda proposta,
dovrei fare un po' di test perché la ho usata in intranet e non sono sicuro
sia standard e compatibile con browser!=IE.
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

  
http://www.criosoftware.it/default18.aspx
BRAVISSIMO!!!!!!
E' proprio quello che mi serviva!!!!!!!!
grazieeeeeee!
L.

  
http://www.criosoftware.it/default18.aspx
Un appunto sulle prestazioni.
Se dividiamo un ciclo for nelle sue parti abbiamo:
1) dichiarazioni
2) condizione d'uscita
3) "espressione da eseguire alla fine di ogni ciclo" (spesso un incremento)
Ora, la 2) e la 3) vengono eseguite ad ogni ciclo: prova a contare 
quante volte chiami getElementsByTagName("*") in una pagina mediamente 
complessa...
proposta di modifica:
for(var x=0,els=document.getElementsByTagName('*');x<els.length;x++)
e quindi poi userai els[x].className, ecc.
Per il problema di Licia:
Si potrebbe in teoria anche accedere ai fogli di stile da scripting, e 
da li' modificare direttamente la classe interessata. Dico in teoria 
perche' non ricordo assolutamente la compatibilita'.
A memoria direi di sicuro i browser gecko e ie>=5.
Cerca sulle rispettive reference document.styleSheets: c'e' qualche 
piccola solita differenza ie / mozilla da li' in poi, ma tutto 
facilmente gestibile. Direi solo proprieta' con nomi diversi.

 sia standard e compatibile con browser!=IE.
Boia se lo e'. E' IE che non segue gli standard (ma va..?), e cambia il
nome a un paio di cosucce, ma a parte questo il comportamento e' piu' o
meno il medesimo.
-- 
ZER0://coder.gfxer.web-designer/
~ Se potete leggere questo, la mia donna e' caduta.
(Letta sul retro di una maglietta di un motociclista)

 facilmente gestibile. Direi solo proprieta' con nomi diversi.
Sì, questa era la seconda ipotesi; ma avendo usato questa collection solo
in intranet non posso giurare sulla compatibilità (e non avevo tempo per
fare test).


 meno il medesimo.
Non so perché ma lo immaginavo... :-/
Prima o poi farò un po' di test sull'argomento; con IE io creo 2 stylesheet
(vado a memoria ma dovrebbe essere così) dove uno dei due è disabled; poi
attraverso le collection stylesheets/rules abilito/disabilito.
-- 
"Ti sei salvato
 o sei entrato in banca pure tu?"
									    A.V.

 e quindi poi userai els[x].className, ecc.
Beh, se vogliamo proprio puntare il dito sull'ottimizzazione o le
performance, allora neppure questo codice e' il massimo.. dovresti saperlo.
-- 
ZER0
~ The Tangent Universe collapsed 5948 days, 3 hours, 57 minutes and 22 seconds ago.
on air ~ "Eighteen Visions - I Let Go"

 attraverso le collection stylesheets/rules abilito/disabilito.
Fare lo puoi fare, ma penso che per il problema in questione sia piu'
indicato modificare direttamente la rule della classe, senza creare due
fogli di stile.
Mi pare comunque che se ne fosse gia'ě parlato, anche se in relazione ai
CSS per la stampa.
Recupero la funzione, l'adatto un attimo e la posto nel thread.
-- 
ZER0
~ The Tangent Universe collapsed 5948 days, 4 hours, 27 minutes and 57 seconds ago.
on air ~ "Moments in Grace - Broken Promises"

 ma per una classe?
Un altro modo a quello proposto puo' essere questo:
<script type="text/javascript"> 
	function getCSSrules(cssIndex,rulesIndex){
		var css=document.styleSheets||null,cssRules=null;
		if (css && css[cssIndex]){
			cssRules=css[cssIndex].rules||css[cssIndex].cssRules||null;
 
			if (cssRules && cssRules[rulesIndex])
				return cssRules[rulesIndex];
		}
		return null;
	};
</script>
Non e' scritta nel migliore dei modi, ma fa il suo sporco lavoro.
Supponendo di avere un codice di markup di questo tipo:
<style type="text/css">
	body{font-family:Tahoma}
	div.test{font-size:12px;}
</style>
</head>
<body>
<div class="test">Burnout 3</div>
<div>Moments in grace</div>
<div class="test">Broken Promises</div>
<a
href="javascript:void(getCSSrules(0,1).style.fontSize='20px')">change</a>
Con "getCSSrules" riesci ad ottere un riferimento ad una rule del CSS e
manipolarla come faresti normalmente.
I parametri stanno ad indicare rispettivamente quale foglio di stile usare,
e quale regola del css referenziare. Nel nostro caso gli abbiamo detto di
prendere il primo foglio di stile che trova nella pagina, e referenziare la
seconda regola (come per gli array, il primo elemento si trova all'indice
zero).
Spero sia abbastanza chiaro.. volendo si potrebbe anche fare una funzione
che ti recuperi un foglio di stile e regola partendo dall'id e dal
selettore, che a livello di manutenzione codice sarebbe forse preferibile,
ma se il problema non lo richiede espressamente si evitano un sacco di
cicli inutili.
-- 
ZER0
~ The Tangent Universe collapsed 5948 days, 5 hours, 10 minutes and 7 seconds ago.
on air ~ "Funeral For A Friend - Rookie of The Year"

 Un altro modo a quello proposto puo' essere questo:
[CUT]
Interessante e utile come base; solo non mi piace questo riferimento
diretto al secondo rules. Soprattutto se qualcuno si occupa del layout e
qualcun altro di javascript, il rischio che il primo mi infili un altro
rules all'inizio č alto. Inoltre sempre piů viene messo in file esterno,
questo puň essere un problema? (forse no).
Ciclare i rules per cercare quello corretto? Senza imbarcarsi
nell'interpretazione del tag, che mi pare un delirio, si potrebbe andare
via stringa (passando il nome del rules da ricevere come riferimento).


 Senza imbarcarsi nell'interpretazione del tag, 
Interpretare? Che c'e' da interpretare?
Si tratta unicamente di ciclare tutte le rules finche' non trovi un
selettore che corrisponde a quello desiderato.
Cmq se n'era gia' parlato.
In ogni caso, se vuoi qualcosa di piu' organico, una possibile struttura
diventa la seguente:
function xbStyleSheet (obj){
	this.styleSheet=obj;
	this.cssRules=obj.rules||obj.cssRules||null;
	this.getRule=function(sSelector){
		sSelector=sSelector.toLowerCase();
		var i=0,rule=null;
 
		while (rule=this.cssRules[i++])
			if (rule.selectorText.toLowerCase()==sSelector)
				break;
 
		return rule||null;
	}
	return this;
}
document.getStyleSheetById=function(id){
	var obj=document.getElementById(id);
	return obj!=null&&(obj.styleSheet||obj.sheet)?new
xbStyleSheet(obj.styleSheet||obj.sheet):null;
}
E poi da codice:
<style type="text/css" id="default">
	div.test{
		font-size:10px;
	}
</style>
with (document.getStyleSheetById("default").getRule("div.test").style){
	fontSize="22px";
	color="red";
}
P.S.
Se vuoi buttarlo sul sito ti pregherei di aspettare un attimo, magari te ne
parlo via mail.
-- 
ZER0
~ The Tangent Universe collapsed 5948 days, 5 hours, 42 minutes and 21 seconds ago.
on air ~ "Franz Ferdinand - This Fire"

 parlo via mail.
Ok...se vuoi lo pubblico, altrimenti no. Fammi sapere.
-- 
"e mai che mi sia venuto in mente
 di essere più ubriaco di voi
 di essere molto più ubriaco di voi"
									  F.D.A.

 Volendo mantenere questo ciclo, 
Perche'? A prescindere dal contesto, nel momento in cui si punta il dito
verso l'ottimizzazione, allora il codice cambia di conseguenza.
Altrimenti tantovale lasciarlo cosi' com'e'. Sai che per me le cose o si
fanno bene o non si fanno.. se si devono fare a meta' tanto vale lasciarle
cosi' come sono, dato che funzionano comunque.
-- 
ZER0
~ The Tangent Universe collapsed 5951 days, 8 hours, 22 minutes and 21 seconds ago.
on air ~ "Gianluca Grignani - Che ne sarà di noi"

 Se compatibile almeno con opera, come dicevo la vedo preferibile.
No, in linea ho tenuto questa per ora...
Quella di Zer0 è lì ferma, dovrei studiarci un attimo. A me è sempre
tornato comodo l'enabled-disabled degli <style> in intra, ma vorrei
dedicarci un po' di tempo per capire compatibilità e xhtml.
-- 
"Affacciati affacciati benedici, guardaci
 guardaci...guardaci!
 Tanto sono quasi duemila anni che stai a guardare!"
									    E.B.

 cosi' come sono, dato che funzionano comunque.
Ok, piu' che d'accordo.
Forse mi sono espresso male io: per il contesto, che avevo letto un po' 
in fretta, consigliavo di dare un'occhiata a document.styleSheet e 
verificarne la compatibilita' (per arrivare all'esempio che hai fatto tu).
L'esempio sul ciclo e' perche' non mi piaceva come veniva svolto a 
prescindere dal contesto. Il consiglio si riferiva ai cicli for in generale.

 performance, allora neppure questo codice e' il massimo.. dovresti saperlo.
Volendo mantenere questo ciclo, al massimo mettere anche la length in 
variabile...

 posso modificare e mettere un "grazie a" con la tua e-mail?
Credo tu abbia optato per document.styleSheets (vedi soluzione di Zer0)?
