Содержание страницы
домикГлавная / Скрипты java и php / JS display none | block
display noneВ этой статье речь пойдёт о параметре display и будут показаны примеры, как с помощью JS назначить любому элементу значение block | none, то есть при клике сделать блок видимым или скрыть его.
Для этого я пропишу совсем маленький код JS, который и будет добавлять, либо удалять необходимые записи в css, где в итоге у меня будет осуществляться задуманное.

Пример 1.

Это самый простой из примеров, в котором через JS мы добавим элементу при клике display: block.

При клике текст появляется.

css, html, jsCOPY
<style> .oml{ margin: 0; padding: 0; display: none; } </style> <p class="oml">При клике текст появляется.</p> <button class="sizi">Отобразить блок</button> <script> var sizi = document.querySelector('.sizi') sizi.onclick = function(){ document.querySelector('.oml').style.display = 'block'; sizi.onclick = null; }; </script>

Пример 2.

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

Плавное появление текста при клике.

css, html, jsCOPY
<style> .oml2{ margin: 0; padding: 0; display: none; opacity: 0; } </style> <p class="oml2">Плавное появление текста при клике.</p> <button class="seze">Отобразить блок</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $('.seze').click(function(){ $(".oml2").css({display:'block'}).animate({opacity:'1'}, 1400) }); </script>

Пример 3.

Экспериментируем далее и повесим на клик по кнопке сразу 2 функции: добавим нужному элементу display: block и тем самым отобразим его на странице, и удалим кнопку присвоив ей display: none.

При клике текст плавно появляется и кнопка исчезает.

css, html, jsCOPY
<style> .oml3{ margin: 0; padding: 0; display: none; opacity: 0; } </style> <p class="oml3">При клике текст плавно появляется и кнопка исчезает.</p> <button class="suzu">Отобразить блок</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $('.suzu').click(function(){ $(".oml3").css({display:'block'}).animate({opacity:'1'}, 1400); $(".suzu").css({display:'none'}).animate({opacity:'0'}, 1400) }); </script>

Пример 4.

И последнее, мы с помощью клика сможем как отобразить элемент, так и его скрыть. Данный пример можно смело применить для скрытого текста.

При кликах текст плавно со сдвигом появляется и исчезает, и меняется текст в кнопке.

css, html, jsCOPY
<style> .oml4{ margin: 0; padding: 0; display: none; } </style> <p class="oml4">При кликах текст плавно со сдвигом появляется и исчезает, и меняется текст в кнопке.</p> <button class="sozo">Отобразить блок</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $('.sozo').click(function(){ if ( document.querySelector('.oml4').style.display == "block" ) { $(".oml4").slideUp('slow'); $('.sozo').text('Отобразить блок'); } else{ $(".oml4").slideDown('slow'); $('.sozo').text('Скрыть блок'); } }); </script>
Изначально текст имеет статус display: none, после клика его значение меняется на display: block и так далее на постоянной основе.
Дата публикации: 22.04.2019
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!