Ранее мы научились скрывать и показывать картинку с помощью CSS-свойства display. При этом на страницу размещали две кнопки: одна задавала значение none, а другая — block. Однако на современных сайтах эти кнопки совмещают в одной: при первом щелчке картинка скрывается, а при втором — показывается. Рассмотрим способ решения этой задачи.
В JavaScript нет метода, который бы подсчитывал количество нажатий кнопки: чётное или нечётное. Зато мы можем получить информацию о текущем состоянии картинки: скрыта она или отображается. Для этого мы обращаемся к свойству display картинки. Если оно block, то картинка в настоящий момент отображается и кнопка должна задать значение none. И наоборот. Ниже приведёно решение этой задачи.
На практическом занятии в первом задании необходимо было поставить три пары кнопок, которые задавали и отменяли фон, рамку и размер шрифта. Теперь необходимо каждую пару кнопок объединить в одну. Алгоритм работы каждой из таких кнопок совпадает с алгоритмом показа и скрытия картинки: вначале опрашивается CSS-свойство и затем менятся на противоположное.
Схема алгоритма показана на рисунке.
Задание 5
Доработайте скрипт задания 1 практического занятия следующующим образом.
Каждую пару кнопок объедините в одну.
После каждого нажатия надпись на кнопке должна меняться на противоположную.
Примечание: кнопки управления рамкой можно не объединять.