Одна кнопка JavaScript

Обработчик JavaScript для одной кнопки button. Кнопка покажет в каком состоянии находится обработчик JavaScript. Кроме этого для кнопки добавлены атрибуты WAI-ARIA методом getElementById.

Что можно выполнить одной кнопкой:

  • Запустить и остановить выполнение функции JavaScript, PHP.
  • Воспроизвести и сделать паузу видео или аудио файла.
  • Заменить и вернуть в исходное состояние.
  • Применить и отменить стили CSS для элемента.
  • Старт и стоп анимации CSS, canvas или SVG.
  • Включить и отключить функции.
  • Включение и отключение скрипта.
  • Переключить скрипт.

Применить одну кнопку

HTML для одной кнопки:

<button type="button" id="button">Старт</button>

JavaScript для одной кнопки:

window.onload = function () {
  var b = document.getElementById("button");
      b.setAttribute("aria-pressed", "false");
      b.onclick = function() {
  if ( this.innerHTML == "Старт" )
       this.innerHTML = "Стоп",
       this.setAttribute("aria-pressed", "true");
  else this.innerHTML = "Старт",
       this.setAttribute("aria-pressed", "false");
     }
return false;
}

Для примера одна кнопка будет запускать и останавливать таймер.

0

Пример добавления стилей CSS фильтр сепия для изображения.

Изображение потеряет цветность после применения фильтра
Изображение для применения фильтра CSS сепия

Хороший пример оформления эффекта нажатия на кнопку включить, выключить (on/off) смотрите на странице блога ruseller.com. Большой выбор оформления кнопок смотрите на странице Кнопки для сайта.