Урок JavaScript: показать и скрыть элемент с текстом

jscriptВ данном уроке мы научимся показывать и скрывать элемент с текстом с помощью JavaScript. Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.

При разработке любых сайтов или интернет магазинов, требуется динамически скрывать и показывать элементы. Современные сайты должны выглядеть динамично, иначе цена разработки сайта будет очень низкой, т.к. ни кто много за статичный сайт платить не будет!

Обычно показываются, и скрываются html тег div, но не обязательно, можно манипулировать любыми элементами.
Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.

Сейчас напишем небольшой примерчик, в нем при нажатии на ссылку мы будем показывать блок, а при повторном нажатии скрывать.

Шаг 1. HTML-разметка
Для начала нам нужно сделать html-разметку. Нам нужно всего 2 элемента — ссылка, по которой будут кликать и сам блок, который будет скрыть, но при нажатии на ссылку он будет появляться. Код разметки:

Скрыть/Показать элемент

Тут любой текст или html-код.

Разметка простая. Одна ссылка, один блок. У ссылки мы указали, что при клике запускаем функцию showHide, и передаем параметр id-шник элемента который нужно показать/скрыть.

Шаг 2. Пишем стили
Теперь нам нужно создать стиль для нашего блока — id=«block_id». Для этого создаем CSS-документ и пишем туда такой код:

#block_id {display: none;}

Здесь мы указали свойство display: none. Оно значит, что по умолчанию элемент будет скрыт. Он появится только при клике на ссылку.

Шаг 3. JavaScript
Теперь перейдем к основному шагу — написание js-кода. Весь код подписан, так что все должно быть понятно. Вот сам код:

<script type="text/javascript">
            /**
            * Функция Скрывает/Показывает блок 
            * @author ox2.ru дизайн студия
            **/
            function showHide(element_id) {
                //Если элемент с id-шником element_id существует
                if (document.getElementById(element_id)) { 
                    //Записываем ссылку на элемент в переменную obj
                    var obj = document.getElementById(element_id); 
                    //Если css-свойство display не block, то: 
                    if (obj.style.display != "block") { 
                        obj.style.display = "block"; //Показываем элемент
                    }
                    else obj.style.display = "none"; //Скрываем элемент
                }
                //Если элемент с id-шником element_id не найден, то выводим сообщение
                else alert("Элемент с id: " + element_id + " не найден!"); 
            }   
</script>

Весь код прокомментирован, так что надеюсь он вам понятен. На этом данный урок окончен. Спасибо за внимание!

Автор скрипта: Студия «OX2» — Разработка и продвижение сайтов
Урок для Вас подготовлен командой сайта www.red-star.pro.