Bouton on/off en HTML

Le bouton on/off doit montrer l'état actif ou inactif d'une fonction dans une application web, et le plus simple est une simili-diode lumineuse.

Code HTML

<button class="onoff" onclick="onoff(this)"><div>off</div></button>

C'est un simple bouton standard avec un calque à l'intérieur pour représenter la diode éclairée en état actif.

Code CSS

.onoff
{
  width:32px;
  height:32px;
  padding:1px 2px 3px 3px;	
  font-size:12px;
  background:lightgray;
  text-align:center;	
}
.onoff div
{
  width:18px;
  height:18px;
  min-height:18px;	
  background:lightgray;
  overflow:hidden;
  border-top:1px solid gray;
  border-right:1px solid white;
  border-bottom:1px solid white;
  border-left:1px solid gray;			
  margin:0 auto;
  color:gray;
}

Les propriétés width, height et min-height seront adaptées à la taille de l'indicateur.

Code JavaScript

var buttonstate=0;
function onoff(element)
{
  buttonstate= 1 - buttonstate;
  var blabel, bstyle, bcolor;
  if(buttonstate)
  {
    blabel="on";
    bstyle="green";
    bcolor="lightgreen";
  }
  else
  {
    blabel="off";
    bstyle="lightgray";
    bcolor="gray";
  }
  var child=element.firstChild;
  child.style.background=bstyle;
  child.style.color=bcolor;
  child.innerHTML=blabel;
}

La fonction onoff() qui a pour paramètre le bouton concerné est appelée quand on clique sur celui-ci, grâce à l'évènement onClick, et passe d'un état à l'autre. Cela donne à la variable globale buttonstate la valeur 1 pour actif et 0 pour inactif.
Le programme utilisant le bouton lira donc cette variable.
On peut aussi déclencher une action en appelant une autre fonction à partir de la fonction onoff().