Newsgroup: it.comp.lang.javascript
Titolo: E' possibile cambiare le proprietà di una classe css?

Tramite operazioni tipo:
 var groundElement = document.getElementById(divID);
 groundElement.style.height = altezza + 'px';
Posso leggere e modificare le proprietą css di un div tramite il suo ID, 
posso fare altrettanto utilizzando la sua CLASSE anzichč l'id? 

"Treggi" [by Microsoft Outlook Express 6.00.2900.5843] on Fri, 9 Jul 2010



<html>
<style type="text/css">
div.aa {height:50px; border:1px solid;}
</style>
<head>
<script type="text/javascript">
function change(cName) {
  for(var x=0;x<document.getElementsByTagName('*').length;x++)
   if(document.getElementsByTagName('*')[x].className==cName)
     bb=document.getElementsByTagName("*")[x]
     bb.style.fontFamily="courier new";
     bb.style.fontSize="15pt";
     bb.style.color="blue";
     bb.style.border="red 3px solid";
     bb.style.height="100px";
     bb.style.width="300px";
 }
</script>
</head>
<body>
<div id="cc" class="aa">
testo del div
</div>
<button onclick="change('aa');">100px</button>
</body>
</html>
-- 
    * b *       Il tuo post č privo del MIME, attivalo in OE.
  *   y   *       Per impostare correttamente Outlook Express
*   Piero   *       e OE-QuoteFix, puoi consultare Wikipedia:
http://wiki.news.nic.it/GuidaNr_2fOutlookExpress?action=recall&date=1172714805
 

 posso fare altrettanto utilizzando la sua CLASSE anzichè l'id?
Se intendi modificare la classe assegnata al tag basta settare quella 
nuova alla proprietà className.
Se intendi modificare il rule, qua dei test fatti tempo fa, potresti 
provare a vedere se ora funzionano con tutti i browser "Moderni":
 
http://www.criosoftware.it/defaultBAK23.aspx
(anzi, se testi posta i risultati ottenuti!)

 posso fare altrettanto utilizzando la sua CLASSE anzichè l'id?
Considera che l'id è univoco, ovvero identifica un elemento, la classe no.
Bisogna quindi vedere quale è il tuo problema: devi cambiare lo stile di 
un elemento specifico o di un gruppo di elementi aventi la stessa classe?
Se un elemento specifico fai come hai fatto tu, altrimenti come ti ha 
detto P/ero ma chiamando getElementsByTagName *una sola volta* e mettere 
il risultato in una variabile prima di fare il ciclo.
Se per caso non ti interessasse explorer sappi che esiste 
"getElementsByClassName" e sembra che anche microsoft lo introdurrà in 
ie9 (meglio tardissimo che mai).
Ci sarebbero anche altri modi, ma per non complicarti la vita con le 
compatibilità varie io ti consiglierei di fermarti a questi due.
Se devi cambiare più proprietà css in un colpo solo è meglio che tu ti 
prepari una classe apposita e, una volta ottenuto un riferimento 
all'elemento che ti interessa, impostane la proprietà className.

       bb.style.width="300px";
Giusto per darti addosso: ma perdindirindella, ti rendi conto di quante 
volte recuperi una node list di *TUTTI* gli elementi della pagina?
Prova a fare due conti, sul serio.

 un elemento specifico o di un gruppo di elementi aventi la stessa classe?
mmh... grazie a tutti per le risposte, provo a modificare qualcosa per 
vedere se riesco a lavorare tramite ID che la vedo come la soluzione più 
facile... 


Ok, ma non è ancora questione di facile o difficile: dipende sempre 
quale è il risultato da raggiungere. Da lì in poi si ragiona.
Chiedi lumi in caso.




Nota che:
a) Con Sizzle, jquery, o qualsiasi altro framework, generalmente puoi
farlo in una sola riga o giù di lì. Ad esempio, in jquery:
	$(".foo").css("color", "red);
b) Dipendentemente da quel che vuoi ottenere, a volte conviene andare
a cambiare la proprietà sul foglio di stile di una data classe, e non
lo style inline di ogni elemento. Anni fa scrissi qualcosa in merito,
in questo NG:
http://groups.google.it/groups?hl=it&q=xbstylesheet
Puoi prenderlo come spunto, per capire un po' meglio ciò che intendo.
Hope it helps.
-- 
"When you have eliminated the impossible, whatever remains, however
improbable, must be the truth."

 serio.
Ho postato quell'esempio "ad libitum" solo a scopo dimostrativo. ^_^
Maestro, così va bene?
function heightMore(cN) {
  for(var i=0;i<document.getElementsByTagName("*").length;i++)
   if(document.getElementsByTagName("*")[i].className==cN)
    document.getElementsByTagName("*")[i].style.height="100px";
 }
-- 
    * b *
  *   y   *
*   Piero   *
#v+
-carpe diem-
#v-

   for(var i=0;i<document.getElementsByTagName("*").length;i++)
no ...
for(var i=0,objs=document.getElementsByTagName("*");i<objs.length;i++)
	if(objs[x].className==.....

 	if(objs[x].className==.....
Personalmente, per questioni di leggibilità, tendo a tenere il ciclo
più pulito possibile, senza dichiarazioni troppo lunghe. Comunque, a
voler esser pignoli, visto che stiamo parlando di ottimizzazioni, si
dovrebbe pure salvare "objs[x]" in una variabile a sé, e/o "length",
in modo da non interrogare il getter ogni ciclo.


> Maestro, così va bene?


Lo strano, è che i browser che ho testato non rilevano nessun errore.
-- 
    * b *
  *   y   *
*   Piero   *
#v+
-in medio stat virtus-
#v-
 

 Lo strano, è che i browser che ho testato non rilevano nessun errore.
Il tuo "errore" non era di sintassi, ma logico.
L'istruzione document.getElementsByTagName("*") recupera *tutti* gli 
elementi nel documento.
Tu hai chiamato questo metodo:
1) nella condizione del ciclo for (che viene eseguita ad *ogni ciclo*, 
per questo Zer0 consigliava tra le altre cose di mettere in variabile 
anche la proprietà length)
2) in un if dentro al for, quindi viene chiamata nuovamente ad *ogni ciclo*
3) se l'if di cui sopra viene soddisfatto, ovvero *un'altra volta* per 
ogni elemento che soddisfa la condizione
Quello che volevamo farti notare è l'inutile spreco di risorse.
Dovresti chiamare il metodo una volta sola e memorizzare il risultato in 
una variabile che poi userai all'interno del ciclo.
Spero ti sia più chiaro ora.

 Spero ti sia più chiaro ora.
Chiarissimo maestro. :-)
Ah.. solo per puntualizzare, devo correggere la correzione di cristiano:
.............. _*Beginning of the citation*_ ..............
no ...
for(var i=0,objs=document.getElementsByTagName("*");i<objs.length;i++)
if(objs[x].className==.....
............... _*The end of the citation*_ ...............
ovviamente: if(objs[i].className==.....
-- 
    * b *
  *   y   *
*   Piero   *
#v+
-panem et circenses-
#v-