Кнопка on/off в HTML

Кнопка on/off должна показывать активное или неактивное состояние функции в веб-приложении, а проще всего - световое сходство-диод.

HTML-код

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

Это простая стандартная кнопка со слоем внутри для представления освещенного диода в активном состоянии.

Код 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;
}

Свойства width, height и min-height будут адаптированы к размеру индикатора.

Код 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;
}

Функция onoff (), которая имеет параметр, вызывается при нажатии на нее с помощью события onClick и переключается из одного состояния в другое. Это дает глобальной переменной buttonstate значение 1 для актива и 0 для неактивного.
Программа, использующая кнопку, прочитает эту переменную.
Можно также вызвать действие, вызвав другую функцию из функции onoff ().