rendere attivo un oggetto CSS tramite javascript

Miza

Nuovo Utente
14 Feb 2013
4
0
0
Salve a tutti,

premetto che ho provato a cercare nel forum ma non mi pare di aver trovato una rispost a questo mio quesito, spero di non aver cercato male.

Il mio problema principale è come rendere attivo un oggetto css tramite comando javascript.
In pratica, ho un simbolo, un bollino nero, che deve diventare rosso quando una variabile della pagina html diventa diversa da zero.
L'oggetto in questione l'ho creato usando css ed è come segue:

Codice:
#led{  
	display: block;  
	width: 20px;  
	height: 20px;  
	background-color: rgb(0,0,0);  
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
				0px 0px 3px 2px rgba(226,0,0,0.5);  
	border-radius: 5px;  
	clear: both;  
	position: absolute;  
	bottombottom: 0;  
	left: 42%;  
}  
#led:active{  
    box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */  
                0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */  
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */   
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */  
    background-color: rgb(83,87,93);  
    top: 3px;  
}

Se fosse un bottone, premendolo, andrebbe nello stato active ma tale stato lo devo impostare solo se una determinata variabile nella pagina html assume un preciso valore (diverso da zero).
Esiste uno script javascript che mi permetta di impostare lo stato "active" dell'oggetto led?

Inoltre ho un problema associato, come inserire nella mia pagina tale oggetto che non è propriamente una immagine.
Tale oggetto andrà dentro ad una cella di una tabella, se fosse un bottone userei uno sript del tipo:
Codice:
<td> 
	<button id="led" name='led_1' >&nbsp;</button>
</td>

però un bottone non è, quindi non saprei come inserirlo nellla pagina.

Ringrazio chiunque possa indirizzarmi sulla retta via!
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Se devi gestirlo via javascript fai una cosa simile, non utilizzare un selettore del css ma una classe

Codice:
<style>
    #led{  
	display: block;  
	width: 20px;  
	height: 20px;  
	background-color: rgb(0,0,0);  
	box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
				0px 0px 3px 2px rgba(226,0,0,0.5);  
	border-radius: 5px;  
	clear: both;  
	position: absolute;  
	bottombottom: 0;  
	left: 42%;  
}  
#led.active{  
    box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */  
                0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */  
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */   
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */  
    background-color: rgb(83,87,93);  
    top: 3px;  
}
</style>
<td> 
	<button id="led" name='led_1' onmousedown="if(!active_button)this.className='active'">&nbsp;</button>
</td>
<script> 
    var active_button = true;
    
    if(active_button==true) document.getElementById('led').className = 'active';
</script>
 

Miza

Nuovo Utente
14 Feb 2013
4
0
0
Grazie mile per la risposta,

ho fatto come mi hai consigliato e con qualche modifica l'ho fatto funzionare come voglio:
ho creato due classi all'oggetto (che ho chiamato indicatore):
Codice:
#indicatore.verde{  
	-moz-box-shadow: 0 0 3px 3px rgba(0,255,0,0.8);
	-webkit-box-shadow: 0 0 3px 3px rgba(0,255,0,0.8);
	box-shadow: 0 0 3px 3px rgba(0,255,0,0.8);
	background-color: rgb(0,190,0);  	
}  
#indicatore.rosso{  
	-moz-box-shadow: 0 0 2px 2px rgba(240,0,0,0.58);
	-webkit-box-shadow: 0 0 2px 2px rgba(240,0,0,0.8);
	box-shadow: 0 0 2px 2px rgba(240,0,0,0.8);
	background-color: rgb(200,0,0);  
}

ho quindi creato la funzione javascript che associa la corretta classe all'oggetto in base al valore della variabile che controllo:
Codice:
if (variabile_1 == 1) {
	document.getElementsById('indicatore').className = 'verde'; // cambio colore all'indicatore: verde
}else{
	document.getElementsById('indicatore').className = 'rosso'; // cambio colore all'indicatore: rosso
}

poi ho inserito nella pagina html:
Codice:
<td> 
 	<button id="indicatore" name='led_1'> &nbsp; </button>
</td>

e così tutto funziona, quando la variabile_1 assume il valore 0, l'mmagine è rossa e quando è 1, l'immagine è verde.


Il problema che mi si pone ora è che di questi indicatori ne devo mettere più di uno nella pagina e sono tutti dipendenti da variabili diverse, indiendenti tra loro.

Nell'html li aggiungerei come segue:
Codice:
<td> 
 	<button id="indicatore" name='led_1'> &nbsp; </button>
</td>
<td> 
 	<button id="indicatore" name='led_2'> &nbsp; </button>
</td>
<td> 
 	<button id="indicatore" name='led_3'> &nbsp; </button>
</td>

Però il codice javascript che gestisce la loro modifica ora dovrebbe essere del tipo:
Codice:
if (variabile_1 == 1) {
	document.metodo('argomento').className = 'verde'; // cambio colore all'indicatore 1: verde
}else{
	document.metodo('argomento').className = 'rosso'; // cambio colore all'indicatore 1: rosso
}
if (variabile_2 == 1) {
	document.metodo('argomento').className = 'verde'; // cambio colore all'indicatore 2: verde
}else{
	document.metodo('argomento').className = 'rosso'; // cambio colore all'indicatore 2: rosso
}
if (variabile_3 == 1) {
	document.metodo('argomento').className = 'verde'; // cambio colore all'indicatore 3: verde
}else{
	document.metodo('argomento').className = 'rosso'; // cambio colore all'indicatore 3: rosso
}

Ho provato ad utilizzare i metodi .getElementByName(..) e .getElementByTag(..) ma sicuramente ho sbagliato.

Ringrazio chiunque possa darmi un'ulteriore aiuto.
 

Miza

Nuovo Utente
14 Feb 2013
4
0
0
[risolto]

Ok, scusate, ho risolto il problema.

L'errore stava che nel CSS usando l'espressine #indicatore, creavo un oggett con ID = indicatore. Come dica il temine ID, questo è unico e non può essere associato a diversi oggetti nella pagina web.
La soluzione sta nel creare una classe e non un ID, quindi il codice CSS si modifica come segue:

Codice:
.indicatore_grigio{  
	width: 22px;  
	height: 14px;  	
	background-color: rgb(150,150,150); 
	border-radius: 5px;  
	clear: both;  	 	
}  
.indicatore_verde{  
	width: 22px;  
	height: 14px;  	
	-moz-box-shadow: 0 0 3px 3px rgba(0,255,0,0.8);
	-webkit-box-shadow: 0 0 3px 3px rgba(0,255,0,0.8);
	box-shadow: 0 0 3px 3px rgba(0,255,0,0.8);
	background-color: rgb(0,190,0); 
	border-radius: 5px;  
	clear: both;  	 	
}  
.indicatore_rosso{  
	width: 22px;  
	height: 14px;  	
	-moz-box-shadow: 0 0 2px 2px rgba(240,0,0,0.58);
	-webkit-box-shadow: 0 0 2px 2px rgba(240,0,0,0.8);
	box-shadow: 0 0 2px 2px rgba(240,0,0,0.8);
	background-color: rgb(200,0,0);
	border-radius: 5px;  
	clear: both;  	  
}

così facendo posso creare più oggetti, di tipo button ai quali associo un differente id per ogniuno ma ai quali conferisco la stessa classe:

Codice:
<td> 
   	<button id="led_1" class="indicatore_grigio"> &nbsp; </button>
</td>
<td>
   	<button id="led_2" class="indicatore_grigio"> &nbsp; </button>
</td>
<td>
   	<button id="led_3" class="indicatore_grigio"> &nbsp; </button>
</td>

così facendo gli indicatori saranno inizialmente tutti grigi.

per poi cambiare colore in base alla variazione delel variabili interne il codice è il seguente:
Codice:
if (variabile_1 == 1) {
	document.getElementById('led_1').className = 'indicatore_verde';
}else{
	document.getElementById('led_1').className = 'indicatore_rosso';
}	
if (variabile_2 == 1) {
	document.getElementById('led_2').className = 'indicatore_rosso';
}else{
	document.getElementById('led_2').className = 'indicatore_grigio';
}	
if (variabile_3 == 1) {
	document.getElementById('led_3').className = 'indicatore_rosso';
}else{
	document.getElementById('led_3').className = 'indicatore_grigio';
}


Grazie a Nefyt per la prima risposta che mi ha indirizzato meglio sulla giusta strada.
 
Discussioni simili
Autore Titolo Forum Risposte Data
ecosito [HTML ][PHP] rendere attivo il modulo contatti di un template HTML e CSS 9
Z [AS3] Rendere attivo pulsante dentro animazione di altro pulsante Flash 0
L Rendere una parte trasparente Photoshop 3
D Rendere testo cliccabile PHP 3
P Aiuto per rendere un Bot Telegram Privato PHP 1
G Rendere dati di una tabella mysql link PHP 22
S [PHP] Rendere visibile variabile di un costrutto if in un altro costrutto if PHP 1
Domenico_Falco1 Rendere dinamico un sito web con chiamate ajax e php e variabili json PHP 12
S rendere mio sito mobile compatibile Offerte e Richieste di Lavoro e/o Collaborazione 2
axem [PHP]rendere cliccabile contenuto PHP 10
R [Javascript] Rendere una funzione sempre visibile Javascript 2
T [PHP] rendere facoltativo il caricamento di un file PHP 5
G [Javascript] rendere visibile un iframe dopo l'avvenuto caricamento del video che esso contiene Javascript 4
S [Javascript] Nascondere e rendere visibile un Div cliccando su due link Javascript 2
M Come rendere solo lettura campo textarea PHP 2
S Rendere responsive un player che ha dimensioni fisse HTML e CSS 3
Shyson Rendere select obbligatoria Javascript 1
T Rendere inaccessibile il forum agli utenti non registrati phpBB 4
M Tumblr - Rendere cliccabili tutte le immagini HTML e CSS 4
Z Rendere visibile un pulsante HTML e CSS 1
G rendere visibile con php cartella public aruba Hosting 2
simonetta619 creare una classe per rendere dinamico l'inserimento PHP 0
G [VENDO] Servizi Pubblicitari Per Youtube (Per Rendere Conosciuto Vostro Video/Canale) Vendere e Acquistare pubblicita' online 0
G [VENDO] Servizi Pubblicitari Per Youtube (Per Rendere Conosciuto Vostro Video/Canale) Annunci servizi di Social Media Marketing 0
G [VENDO] Servizi Pubblicitari Per Youtube (Per Rendere Conosciuto Vostro Video/Canale) Annunci servizi di Social Media Marketing 0
E rendere il codice più funzionale PHP 5
Frank10 Script o qualsiasi cosa per rendere autonomo chi vuole modificare contenuti PHP 3
D Come posso rendere obbligatorio un drop down menu? Javascript 12
Athene Rendere visibile un errore in una pagina di login in due modi differenti PHP 8
M [htaccess] Rendere accessibile solo la pagina riscritta Web Server 0
asevenx rendere visibili e nascondere DIV con onlink Javascript 12
S Rendere sito visibile solo in Italia Hosting 0
M Consigli su come rendere fluido questo template HTML e CSS 0
P HTML - rendere cliccabile parte del testo HTML e CSS 2
H Rendere cliccabile l'header HTML e CSS 10
X rendere visibile ad un determinato id PHP 2
C [JAVA]Come rendere opzionale un parametro di un costruttore? Java 3
M rendere menu "sopra al testo" Flash 1
f.quintaliani rendere un tratto irregolare come se fosse fatto a mano Webdesign e Grafica 6
S rendere campi form obbligatori Javascript 1
G Come posso rendere invisibili cartelle e file sul web PHP 0
C php, rendere cliccabile un link PHP 0
peppoweb Manuale on-line da Microsoft per rendere sicuri i server Windows e Software 0
M Cerco profilo fb possibilmente italiano che abbia marketplace attivo Annunci servizi di Social Media Marketing 0
C Vendo profilo Instagram reale è attivo 45,7k Annunci servizi di Social Media Marketing 1
M [PHP] Mostrare risultati di una tabella ma solo se ID è attivo PHP 0
F Vendo account facebook con 5.000 amici attivo da 6 mesi Annunci servizi di Social Media Marketing 2
S Profilo attivo 1k instagram Annunci servizi di Social Media Marketing 3
S Profilo instagram attivo +600 follower Annunci servizi di Social Media Marketing 1
alexmalons [VENDO] Gruppo Facebook con 39.000 utenti attivo e funzionante Annunci servizi di Social Media Marketing 1

Discussioni simili