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:eek:gni vlta che premo un bottone il testo corrispondente si evidenzia con lo stile applicatogli dai css...come si fa?
 
M

mat80matteo

Nuovo Utente
14 Nov 2005
2
0
0
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?
 
Dusy

Dusy

Utente Attivo
8 Nov 2005
488
0
0
Germania - Deutschland
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
Autore Titolo Forum Risposte Data
Eugene [css] gestire margin di un td HTML e CSS 2
G Qualcuno conosce questo software per gestire le telecamere IP Cam e Videosorveglianza 0
E Come gestire al meglio le immagini legno grande formato Photoshop 0
L Interfaccia grafica per gestire sql server .NET Framework 1
R Plugin per Gestire videocorsi a pagamento WordPress 3
M Come gestire aggiornamenti e modifiche di sito live CMS (Content Management System) 0
S Gestire scelta dropdown con dati da Mysql PHP 2
Tommy03 Gestire dimensioni immagini PHP 4
D Come gestire un singolo checkbox PHP 10
MarcoGrazia Gestire lista campi vuoti in fase di autenticazione jQuery 1
elpirata Gestire permessi accesso alle pagine PHP 3
A [ASP.Net] Gestire il profilo ADMIN in un progetto ASP NET e pattern MVC ASP.NET 0
M [PHP] Come gestire gli utenti online PHP 9
M [php] Come gestire i tags PHP 1
svtmaster professionalità per gestire sito web Offerte e Richieste di Lavoro e/o Collaborazione 4
L [HTML] Gestire movimento GIF HTML e CSS 0
BestSellerMauroTop Software per gestire tanti profili e pagine, e farle crescere in modo autonomo! Annunci servizi di Social Media Marketing 0
W Gestire ccTalk o libreria c++ da php PHP 0
W [PHP] gestire una richiesta curl sul server PHP 0
W Piccolo sistema per gestire alcune periferiche, Java o altro linguaggio? Java 8
bubino8 [WordPress] Gestire SSL (https://) da .htaccess WordPress 9
C [WordPress] Creare e gestire un nuovo sito web WordPress 5
M Gestire ErrorDocument 404 mantenendo lo stesso url Web Server 0
S gestire una tabella mysql PHP 9
R gestire il ritorno di una variabile con success Ajax 2
S Gestire Motion Detection TP-LINK CAMERA NC200 IP Cam e Videosorveglianza 0
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
webmachine [PHP] gestire rinnovi PHP 1
P Gestire accesso ad un file xml pubblico PHP 1
D Gestire diversi tipi di pagamento per tipologia di cliente E-Commerce 4
asevenx Cerco plugin per gestire appuntamenti con agenda e campi di selezione WordPress 4
matteoraggi Software per gestire migliaia di permament redirect? SEO e Posizionamento 0
K Gestire response con servlet remota Sviluppo app per Android 1
P Piccolo software per gestire gli utenti. Snippet PHP 5
F Gestire data e ora PHP 6
D Gestire firme digitali con PHP PHP 0
C [Facebook Autolike]Software per gestire più account, mandare like, creare stati, amicizie e altro.. Vendere e Acquistare pubblicita' online 0
D gestire commenti e risposte ... PHP 3
L Gestire password utenti registrati. Quale codifica? PHP 23
asevenx Gestire posizionamento voci sottomenu che si nascondono HTML e CSS 1
N Programma per gestire Cookies secondo disposizioni del Garante Privacy 3/6/2014 G.U. 126 Leggi, Normative e Fisco 0
A Gestire e modificare immagini Java 2
M Gestire la chiusura forzata. Sviluppo app per Android 1
L Sito con doppia lingua. Gestire il cambio PHP 4
felino Wordpress e QTranslate: come gestire i widget WordPress 11
IImanuII Gestire lingua su facebook con php PHP 18
mondrian Gestire un web server su una virtualbox Apache 12
L gestire array per radio-checkbox in ciclo while PHP 2
MarcoGrazia Gestire gruppi e categorie di link con PHP PHP 1
L Button per gestire JS in WebBrowser di VBNet .NET Framework 0

Discussioni simili

Alto Basso