come gestire i css con javascript

M

mat80matteo

Nuovo Utente
14 Nov 2005
2
0
0
Salve ragazzi vispiego il mio problem..
Allora io ho dei bottoni che rimandano a del testo...io dovrei fare questo:ogni vlta che premo un bottone il testo corrispondente si evidenzia con lo stile applicatogli dai css...come si fa?
 
ecco il codice a grandi linee

<HEAD>
<style type="text/css">
.normale { color:E0DADA; }
.speciale { color:black; }
</style>
<SCRIPT LANGUAGE="JavaScript">
function cambia(id)
{
switch(id){
case 1:
document.all.primo.className = "speciale";
document.all.secondo.className = "normale";
document.all.terzo.className = "normale";
document.all.quarto.className = "normale";
document.all.quinto.className = "normale";
document.all.sesto.className = "normale";
break;
case 2:
document.all.secondo.className = "speciale";
document.all.primo.className = "normale";
document.all.terzo.className = "normale";
document.all.quarto.className = "normale";
document.all.quinto.className = "normale";
document.all.sesto.className = "normale";
break;
case 3:
document.all.secondo.className = "normale";
document.all.primo.className = "normale";
document.all.terzo.className = "speciale";
document.all.quarto.className = "normale";
document.all.quinto.className = "normale";
document.all.sesto.className = "normale";
break;
case 4:
document.all.secondo.className = "normale";
document.all.primo.className = "normale";
document.all.terzo.className = "normale";
document.all.quarto.className = "speciale";
document.all.quinto.className = "normale";
document.all.sesto.className = "normale";
break;
case 5:
document.all.secondo.className = "normale";
document.all.primo.className = "normale";
document.all.terzo.className = "normale";
document.all.quarto.className = "normale";
document.all.quinto.className = "speciale";
document.all.sesto.className = "normale";
break;
case 6:
document.all.secondo.className = "normale";
document.all.primo.className = "normale";
document.all.terzo.className = "normale";
document.all.quarto.className = "normale";
document.all.quinto.className = "normale";
document.all.sesto.className = "speciale";
break;
default:
document.all.primo.className = "speciale";
}
}

</SCRIPT>
</HEAD>
<BODY>
<P CLASS="speciale" ID="primo" onMouseover="cambia(1)">Text</P> <BR> <BR>
<span class="normale" id="secondo" onMouseover="cambia(2)">text2</span><br><br>
<span class="normale" id="terzo" onMouseover="cambia(3)">text3</span><br><br>
<span class="normale" id="quarto" onMouseover="cambia(4)">text4</span><br><br>
<span class="normale" id="quinto" onMouseover="cambia(5)">text5</span><br><br>
<span class="normale" id="sesto" onMouseover="cambia(6)">text6</span><br><br>
<form>
<input type="button" onClick="cambia(1)" >
<input type="button" onClick="cambia(2)" >
<input type="button" onClick="cambia(3)" >
<input type="button" onClick="cambia(4)" >
<input type="button" onClick="cambia(5)" >
<input type="button" onClick="cambia(6)" >
</form>
<A HREF="javascript:cambia('primo')">Cambia stile!</A>
</BODY>
</HTML>


l'effeto c'è ma si può scrivere una funzione piu corta?
 
Prova la mia creazione...
forse non è un sistema elegantissimo ma...
se vuoi semplifica quella serie di brutti IF con il case...
spero funzioni :byebye:


<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function cambia(id)
{
var testo_da_modificare = document.getElementById('testo')
if(id==1)
{
testo_da_modificare.style.color="red";
};
if(id==2)
{
testo_da_modificare.style.color="green";
};
if(id==3)
{
testo_da_modificare.style.color="blue";
};
};

</SCRIPT>
</HEAD>
<BODY>
<em id="testo">Questo è il testo da modificare...</em>
<br>
<br>
<input type="button" onClick="cambia(1)" style="background-color: red;" value="Rosso">
<input type="button" onClick="cambia(2)" style="background-color: green;" value="Verde">
<input type="button" onClick="cambia(3)" style="background-color: blue;" value="Blu" >
</BODY>
</HTML>
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

Eugene
[css] gestire margin di un td
Risposte
2
Visite
2K
HTML e CSS
Eugene
Eugene
G
Qualcuno conosce questo software per gestire le telecamere
Risposte
0
Visite
1K
IP Cam e Videosorveglianza
Giovannino60
G
E
Come gestire al meglio le immagini legno grande formato
Risposte
0
Visite
1K
Photoshop
Ermesv
E
L
Interfaccia grafica per gestire sql server
Risposte
1
Visite
2K
.NET Framework
lucavalentino
L
R
Plugin per Gestire videocorsi a pagamento
Risposte
3
Visite
2K
WordPress
brunotech
B
M
Come gestire aggiornamenti e modifiche di sito live
Risposte
0
Visite
1K
CMS (Content Management System)
mgkwd
M
S
Gestire scelta dropdown con dati da Mysql
Risposte
2
Visite
1K
PHP
Sky One
S
Tommy03
Gestire dimensioni immagini
Risposte
4
Visite
2K
PHP
MarcoGrazia
MarcoGrazia
D
Come gestire un singolo checkbox
Risposte
10
Visite
2K
PHP
dionisium
D
MarcoGrazia
Gestire lista campi vuoti in fase di autenticazione
Risposte
1
Visite
3K
jQuery
MarcoGrazia
MarcoGrazia
elpirata
Gestire permessi accesso alle pagine
Risposte
3
Visite
1K
PHP
Flaviors200
Flaviors200
A
[ASP.Net] Gestire il profilo ADMIN in un progetto ASP NET e pattern MVC
Risposte
0
Visite
2K
ASP.NET
antobaro
A
M
[PHP] Come gestire gli utenti online
Risposte
9
Visite
2K
PHP
macus_adi
macus_adi
M
[php] Come gestire i tags
Risposte
1
Visite
1K
PHP
macus_adi
macus_adi
svtmaster
professionalità per gestire sito web
Risposte
4
Visite
2K
Offerte e Richieste di Lavoro e/o Collaborazione
LDB Multimedia e Internet
LDB Multimedia e Internet
L
[HTML] Gestire movimento GIF
Risposte
0
Visite
1K
HTML e CSS
lazlo
L
BestSellerMauroTop
Software per gestire tanti profili e pagine, e farle crescere in modo autonomo!
Risposte
0
Visite
1K
Annunci servizi di Social Media Marketing
BestSellerMauroTop
BestSellerMauroTop
W
Gestire ccTalk o libreria c++ da php
Risposte
0
Visite
1K
PHP
w_t
W
W
[PHP] gestire una richiesta curl sul server
Risposte
0
Visite
1K
PHP
w_t
W
W
Piccolo sistema per gestire alcune periferiche, Java o altro linguaggio?
Risposte
8
Visite
2K
Java
Max 1
Max 1
Alto Basso