Cambiare stili di una classe

[sally3000]

Ciao a tutti, io ho una classe:

.pinco_pallo {

<stili>

}

In una pagina web ho N div con questa classe,
come faccio a cambiare uno stile di quella classe in maniera che lo prendano tutti i div che hanno quella classe?

esempio:

.pinco_pallo {
background:#FFF;
}

<div class="contenitore">
<div class="ora">
<div class="pinco_pallo"></div>
<div class="pinco_pallo_1"></div>
<div class="pinco_pallo_1"></div>
<div class="pinco_pallo"></div>
<div class="pinco_pallo"></div>
</div>
</div>

io voglio impostare background di pinco_pallo a #000
come faccio?

[sally3000]

Mi sono accorta di aver sbagliato sezione prima, ve la ripropondo qui:

Ciao a tutti, io ho una classe:

.pinco_pallo {

<stili>

}

In una pagina web ho N div con questa classe,
come faccio a cambiare uno stile di quella classe in maniera che lo prendano tutti i div che hanno quella classe?

esempio:

.pinco_pallo {
background:#FFF;
}

<div class="contenitore">
<div class="ora">
<div class="pinco_pallo"></div>
<div class="pinco_pallo_1"></div>
<div class="pinco_pallo_1"></div>
<div class="pinco_pallo"></div>
<div class="pinco_pallo"></div>
</div>
</div>

io voglio impostare background di pinco_pallo a #000
come faccio?

[Sonikag]

.pinco_pallo {
background-color:#000;
}

[sally3000]

forse non mi sono spiegata bene
Io volevo farlo in maniera dinamica... come un interruttore on off

<button ON > //cambia background #000
<button OFF > //cambia background #FFF

[Sonikag]

Beh serve del javascript in questo caso! (ma non sono ferata in javascript io)

[Mich_]

Esatto, serve JS.
E in effetti dal primo post non si capiva.

Ci sono due metodi: cambio completo di classe e assegnazione di un nuovo attributo (o di un nuovo valore ad un attributo)

<div id="questoggetto" class="vecchiaclasse"> ... </div>

1. <button value="cambiacolor" onclick="document.getElementById('questoggetto').c lassname='nuovaclasse';" />

2. <button value="cambiacolor" onclick="document.getElementById('questoggetto').s tyle.color='#000';" />

Invece e` piu` complesso modificare la classe, e non credo che poi la puoi applicare in automatico a tutti gli oggetti che hanno quella classe.
Pero` puoi fare un loop su tutti gli oggetti che hanno una certa classe oppure che hanno l'id che inizia in un certo modo.

[sally3000]

il problema è che non ho 1.2....3 div con quella classe ma potrei avere anche 1000 non vorrei che la cosa diventasse pesante ripassando ogni singolo div

[Mich_]

Pero` puoi fare un loop su tutti gli oggetti che hanno una certa classe oppure che hanno l'id che inizia in un certo modo

Chiaramente con quei numeri ti conviene fare una routine specifica, e magari prepararti in anticipo il vettore con tutti gli oggetti cui applicare la cosa, in modo da ridurre i tempi al click.

Se sono mille, probabilmente vedi che il browser si ferma un attimo per elaborare il tutto. Potrebbe impiegarci da un secondo a una decina (dipende dalla potenza del client).

Dato che sta diventando un problema di loop JS, sposto nel forum javascript.

[sally3000]

che intendi per routine specifica?

[pierofix]

Vediamo se ho capito. Un esempio:

XHTML

<div class="box">
   
</div>


CSS

.box
{
   background-color:#FFF;
}
.urgente
{
   background-color:#000;
}


Javascript

window.onload = function()
{
   var divs = document.getElementsByTagName('div')

   function get_divs_by_class(nome_classe)
   {
      var collezione = new Array()
      for (var i = 0; i < divs.length; i++)
      {
         if ( divs.item(i).className == nome_classe )
         {
            collezione.push(divs.item(i))
         }
      }
      return collezione
   }

   function switch(stato)
   {
      if ( stato == 'on' )
      {
         var elementi = get_divs_by_class('box')
         for (var i = 0; i < elementi.length; i++)
         {
            elementi[&#105;].className = 'urgente'
         }
      }
      else if ( stato == 'off' )
      {
         var elementi = get_divs_by_class('urgente')
         for (var i = 0; i < elementi.length; i++)
         {
            elementi[&#105;].className = 'box'
         }
      }
   }
}