modifica css da javascript ..come?

**corrado22** · 10-08-2009, 14:40

Ho una pagina con una tabella con classe=tabella11
qui la parte di codice css..
table.tabella11 td {
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
background-color:#FFFFAA;
border:1px none blue;
padding:4px;
white-space:nowrap;
}

come posso cambiare al volo da javascript il parametro per esempio background-color:
nella tabella11 passando al di sopra della scritta:
Cambia

function changeTB(val){
document.??????????? (come identifico qui?) = val;
}

grazie per la risposta

**cavicchiandrea** · 10-08-2009, 15:06

Le tabelle dispongono di un id univoco? Sono create dinamicamente?

**corrado22** · 10-08-2009, 15:51

Intanto grazie...

la tabella è tipo questa:
<table width="745" align="center" class="tabella11">
<tr>.....

volevo realizzare un qualcosa che mi permettesse di cambiare i colori della tabella
in modo veloce senza il refresh della pagina

ed alla fine i colori scelti dall'utente memorizzarli in un db

in php funziona già tutto però devo continuamente ricaricare la pagina....

**cavicchiandrea** · 10-08-2009, 16:46

Non ho capito se le tabelle sono generate dinamicamente (lato server) oppure no, comunque se devi salvare i cambiamenti in un db e già cosi funziona modificare il tutto diventerebbe abbastanza complesso, e non credo (senza offesa) tu sia in grado di farlo.
Malgrado ciò tu voglia provarci documentati nella sezione javascript.html.it sezioni dom (manipolazione del documento) e ajax (invio/richieste dati al server), come già detto operazione complessa a te decise se ne vale la pena.

**corrado22** · 10-08-2009, 17:04

Dovrei solo intercettare il parametro css, ancora non ho capito se si può fare
le tabelle possono essere generate anche dal server ma penso che non sia questo il problema
con il server in ajax ci dialogo tranquillamente...

in sostanza dovrei solo cambiare al volo dei colori per poi registrarli definitivamente.

ho visto che tramite id si potrebbe fare piu' o meno in questo modo:
var1=document.getElementById('miatabella')
var2=document.getElementsByTagName("td")
fino ad arrivare all'elemento desiderato...

forse mi devo regolare cosi'...

**whisher** · 10-08-2009, 17:16

Prova con una cosa del genere

Codice PHP:


var miatabella = document.getElementById('miatabella');

var tds = miatabella.getElementsByTagName("td");

tds.item(0).style.backgroundColor = "#FFFFAA";

**corrado22** · 10-08-2009, 17:42

ok, funziona colora di giallo il primo campo
adesso dovrei fare un ciclo di for per quanti sono gli elementi

volevo appunto intercettare modificare l'impostazione a livello css in modo da variarli tutti in un colpo solo.

grazie per i suggerimenti

**whisher** · 10-08-2009, 18:27

Originariamente inviato da corrado22
ok, funziona colora di giallo il primo campo
adesso dovrei fare un ciclo di for per quanti sono gli elementi

volevo appunto intercettare modificare l'impostazione a livello css in modo da variarli tutti in un colpo solo.

grazie per i suggerimenti

Prova a dare un occhio

http://javascript.html.it/articoli/l...io-perfetto/3/

ma si va sul difficile

lo puoi anche fare creando una classe ad hoc.

**dottwatson** · 10-08-2009, 21:25

prova così...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>test</title>
  <script>
    function cambia(){
        var elements=document.getElementsByTagName('*');
        alert(elements.length);
        for(var n=0;n < elements.length;n++){
            if(elements[n].className == 'tizio'){
                elements[n].style['color']="#ff0000";
                }
            }
        }  
  </script>
  
  </head>
  <body>
    <h2 class="ciccio">ciao mondo</h2>
    <h2 class="tizio">cioa mamma</h2>
    <h2 class="caio">ciao universo</h2>
    <script>cambia()</script>
  </body>
</html>

**corrado22** · 10-08-2009, 22:52

Ho optato per questo:

var bkg = new Array();
var bor = new Array();

bkg[0] = '#FF0000';
bkg[1] = '#00FF00';
bkg[2] = '#0000FF';
bor[0] = '1px solid red';
bor[1] = '2px solid blue';
bor[2] = '3px solid white';

function changeBG(whichColor){

var tbb = document.getElementById('miatabella');
var tds = tbb.getElementsByTagName("td");
for(i=0; i < tds.length; i++) {
tds.item(i).style.backgroundColor = bkg[whichColor];
tds.item(i).style.border = bor[whichColor];
}
non mi funziona con Firefox solo questa istruzione:
tbb.style.borderColor="blue";
cioè non riesco a cambiare il colore del bordo della tabella

Discussione: modifica css da javascript ..come?

Strumenti discussione

Ricerca discussione

Visualizza

modifica css da javascript ..come?

Permessi di invio