rendere attivo un oggetto CSS tramite javascript

  • Creatore Discussione Creatore Discussione Miza
  • Data di inizio Data di inizio

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!
 
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>
 
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.
 
[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