Как скрыть div js

Скрыть контейнер div с помощью JavaScript/jQuery

В этом посте мы обсудим, как скрыть контейнер div в JavaScript и jQuery.

1. Использование jQuery

Самый распространенный способ скрыть элемент в jQuery — использовать .hide() метод. Он работает, устанавливая display Свойство CSS для none . Теперь документ отображается так, как если бы элемент не существовал.

$ ( document ) . ready ( function ( ) < $ ( '#container' ) . hide ( ) ;

Кроме того, вы можете напрямую установить display Свойство CSS для none позвонив .css(«display», «none») .

$ ( document ) . ready ( function ( ) < $ ( '#container' ) . css ( 'display' , 'none' ) ;

Если вы хотите сохранить пространство, занимаемое элементом в документе, установите visibility собственность на hidden вместо.

$ ( document ) . ready ( function ( ) < $ ( '#container' ) . css ( 'visibility' , 'hidden' ) ;

Другой подход заключается в использовании .fadeOut() способ установить display свойство стиля для none . Вы можете дополнительно добавить задержку с .delay() метод.

$ ( document ) . ready ( function ( ) < $ ( '#container' ) . delay ( 1000 ) . fadeOut ( 'fast' ) ;

Нравиться .fadeOut() метод, вы можете использовать .slideUp() способ установить display свойство стиля для none .

$ ( document ) . ready ( function ( ) < $ ( '#container' ) . slideUp ( ) ;

2. Использование JavaScript

В простом JavaScript вы можете установить CSS display собственность на none , как показано ниже:

document . getElementById ( ‘container’ ) . style . display = «none» ;

The display Свойство скрывает элемент, а также удаляет его из DOM. Чтобы избежать изменения макета документа, вы можете установить его visibility к hidden вместо.

document . getElementById ( ‘container’ ) . style . visibility = «hidden» ;

Это все о сокрытии контейнера div в JavaScript и jQuery.

Оценить этот пост

Средний рейтинг 4.66 /5. Подсчет голосов: 32

Голосов пока нет! Будьте первым, кто оценит этот пост.

Сожалеем, что этот пост не оказался для вас полезным!

Расскажите, как мы можем улучшить этот пост?

Спасибо за чтение.

Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂

Подписывайся
0 Комментарии
Встроенные отзывы
Просмотреть все комментарии
Загрузить больше комментариев
Просматривать
Подпишитесь на новые публикации

Все проблемы
Практика DSA
100 самых популярных задач
50 лучших классических задач
Лучшие алгоритмы

Компилятор С/С++
Компилятор Java
Компилятор Python
Компилятор JavaScript
компилятор PHP
Компилятор C#

Свяжитесь с нами
Политика конфиденциальности
условия обслуживания
Подпишитесь на новые публикации

Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно

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

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

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

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

Вот исходный код примера, с подробным описанием:

  JavaScript показать и скрыть элемент с текстом | Дизайн студия OX2    Скрыть/Показать элемент
 
 Тут любой текст и html код 
 
Дизайн студия OX2 разрабатывает сайты и интернет магазины любой сложности. 
По низким ценам!

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

OX2 2014-10-05 2014-10-05

Комментарии (Написать комментарий)

Elka [02.02.2016]

Комментарий:
Огромное спасибо))

mr [02.01.2016]

Комментарий:
спосибоооооооооооооооооооооооооооооооооооооооооооооо

vbrb [21.12.2015]

Комментарий:
СПасибо!

Иван Сергеевич [16.05.2015]

Комментарий:
Спасибо, мне очень помог данный пример

Отобразить / скрыть блоки div при помощи button

По умолчанию показано 4 блока, при нажатии на кнопку show 1 показать только блоки show_1, при нажатии show 2, показать только блоки show_2, при нажатии кнопки show all показать все блоки.

.button-blcok < display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 45px; .wrapper< margin-right: auto; >> .content-box < display: flex; flex-wrap: wrap; justify-content: center; .content__tittle< margin: 10px; width: 450px; height: 200px; >.show_1 < background: rgb(190, 119, 119); >.show_2 < background: rgb(155, 4, 4); >>

Отслеживать

67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков

задан 3 авг 2020 в 7:32

pavel.jobbox pavel.jobbox

11 3 3 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Повесить события клика на каждую кнопку (допустим при загрузке страницы) (для этого добавил id к кнопкам)
В функции клика сначала скрыть все элементы класса «show» (так же добавил в html) и после выбрав элементы с нужным классом отобразить их.
По кнопке «All» просто показываем все блоки.

Если разных блоков будет много и дублировать код не охота, то можно использовать атрибут data-* (с номером класса) или номер идентификатора кнопки.

 // выбираем кнопку document.getElementById('btn1').addEventListener('click', function() < // Выбираем все элементы класса show let blocks = document.querySelectorAll('.show'); // скрываем их blocks.forEach(block =>< block.style.display = "none"; >); // Выбираем все элементы нужного класса blocks = document.querySelectorAll('.show_1'); // отображаем их blocks.forEach(block => < block.style.display = "block"; >); >); document.getElementById('btn2').addEventListener('click', function() < let blocks = document.querySelectorAll('.show'); blocks.forEach(block =>< block.style.display = "none"; >); blocks = document.querySelectorAll('.show_2'); blocks.forEach(block => < block.style.display = "block"; >); >); // кнопка all просто отображаем все элементы document.getElementById('btnall').addEventListener('click', function() < let blocks = document.querySelectorAll('.show'); blocks.forEach(block =>< block.style.display = "block"; >); >);

.button-blcok < display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 45px; >.button-blcok .wrapper < margin-right: auto; >.content-box < display: flex; flex-wrap: wrap; justify-content: center; >.content-box .content__tittle < margin: 10px; width: 450px; height: 200px; >.content-box .show_1 < background: #be7777; >.content-box .show_2

как скрыть элемент в js

Есть несколько способов скрыть элемент на js, основанные на применении стилей. Например, можем задать определенное CSS-правило для атрибута style самого элемента:

Используя display: none
Используя visibility: hidden

Оба эти способа скрывают элемент, но разница в том, что элемент, скрытый с помощью display: none , не занимает места на странице, в отличие от visibility: hidden .

Рассмотрим вариант применения этих стилей, но с использованием имен CSS-классов и методов classList.add() , classList.remove() для их добавления и удаления. Создадим класс с именем hidden, который содержит свойства для скрытия элемента:

.hidden  display: none; >

Затем, чтобы скрыть элемент с помощью этого класса, добавим его к элементу:

document.getElementById('myElement').classList.add('hidden');

Чтобы показать элемент снова, удалим класс:

document.getElementById('myElement').classList.remove('hidden');

Такой подход может быть более гибким и удобным в использовании, особенно если вы работаете с множеством элементов на странице.