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

HTML, CSS, JS Как скрыть и показать элемент

getElementsByClassName возвращает массив элементов. Обратите внимание — get elementS — множественное число. Сейчас актуальны функции querySelector и querySelectorAll которые возвращают соответственно первый и все найденные элементы

24 янв 2020 в 20:09

1 ответ 1

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

function darkmessage()

.darkmessage

Growl .    Test.

Отслеживать
ответ дан 24 янв 2020 в 17:55
user176262 user176262
b.style.display = b.style.display == ‘block’? ‘none’ : ‘block’
24 янв 2020 в 20:05
@axmed2004 — чудесно 🙂
– user176262
24 янв 2020 в 20:10

javascript
html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Показать и скрыть элемент на JS

На этом уроке вы узнаете, как на языке JavaScript показать и скрыть любой элемент на сайте, кликнув по кнопке.

HTML структура

В HTML разметке присутствует кнопка, имеющая начальное положение «Показать элемент» и скрытый текстовый блок. При клике по кнопке, блок с текстом показывается. При повторном клике по кнопке, данный блок скрывается. Зададим текстовому блоку класс content, отвечающий за оформление и класс hidden. Из названия последнего понятно, что этот класс скрывает контент, пока пользователь не сделает клик по кнопке.

Товарищи! постоянное информационно-пропагандистское обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Повседневная практика показывает, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.

CSS код

Разукрасим нашу кнопку линейным градиентом и установим легкую тень.

.btn text-decoration: none;
text-align: center;
width: 250px;
padding: 20px 0;
border: solid 1px #004F72;
border-radius: 4px;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
color: #E5FFFF;
background-color: #3BA4C7;
background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
outline: none;
>

.content margin-top: 20px;
padding: 20px;
border: solid 1px rgb(214, 218, 219);
border-radius: 4px;
font-family: Calibri, ‘Trebuchet MS’, sans-serif;
>

.hidden display: none; // скрывает текст
>

JavaScript код

По событию клика по кнопке, у текстового блока должен удалиться класс hidden и тогда блок перестанет быть скрытым. Повторный же клик по кнопке наоборот вешает класс hidden на контентный блок, тем самым скрывая его. Как видите, весь механизм завязан на классе hidden.

Создадим две переменные, которым присвоим кнопку и блок по названиям селекторов. Затем будем отлавливаем событие клика по кнопке с помощью обработчика событий addEventListener. Первым параметром мы передаем событие клика, а вторым параметром название функции btnClick, в которой описываем действия, которые должны произойти после клика по кнопке. Первым делом необходимо найти класс hidden и при помощи метода toggle (переключатель) добавлять класс hidden, если его нет и удалять, если он есть. Кроме того на кнопке должны меняться надписи «Показать элемент / Скрыть элемент». Для этого обратимся к свойству кнопки textContent и создадим условие if-else. Если в блоке с классом content содержится и класс hidden, то поменять на кнопке надпись на «Скрыть элемент». В противном случае оставить, как было «Показать элемент».

const btn = document.querySelector(«.btn»);
const content = document.querySelector(«.content»);

function btnClick() console.log(content.classList);

if (content.classList.contains(«hidden»)) btn.textContent = «Скрыть элемент»;
> else btn.textContent = «Показать элемент»;
>

Демонстрация показа и скрытия элемента

Создано 17.04.2020 10:32:13

Михаил Русаков

как скрыть элемент в 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');

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

Как скрыть или удалить элемент со страницы при помощи jQuery

Для начала рассмотрим пару примеров, как мы можем скрыть элемент со страницы при помощи обычного CSS:

.my-selector

opacity – отвечает за прозрачность, height – за высоту нашего контейнера, display – за отображение, text-indent – обычно влияет только на отступ текста (в очень редких случаях такой вариант тоже можно применять). Не будем писать про извращения c position: absolute ��

В jquery чаще всего используют связки:

Кроме этого, иногда целесообразней использовать переключатели (toggle). Просто скрыв элемент, вы не убираете его из кода – это полезно когда в ваших скриптах он может позже появиться (на например это меню аккордеон – если вы удалите код со страницы нечего будет показывать). Для удаления селектора со страницы используется remove()

И хотя это не самый лучший вариант, ведь ваша страница сначала прогружается, а только потом скрипт ищет элемент и удаляет его. Будет гораздо лучше, если вы найдете файл, с помощью которого выводится тот или иной кусок кода, например на странице index.html или index.php – но если вы работаете с CMS, то не стоит рассчитывать что все будет так просто ��

Как скрыть или показать элемент используя анимацию на jQuery

Можно применять комбинацию fadeIn() и fadeOut(), использовать slideDown() и slideUp(), или же быстрая смена по клику – slideToggle() и fadeToggle(). Соответственно коды для них:

Если вам нужна плавная анимация, можно поставить число в миллисекундах 200, 400, 1200 и т.д. , или фразы в стиле slow, fast – тут уже как удобней, подробней смотрите в документации �� . Ну и если анимация нам не нужна вообще, а она бывает по умолчанию уже задана 600 (если ничего не путаю), то просто ставим 0 – fadeIn(0);

Конечно это не самый лучший вариант, и я вам настоятельно рекомендую несколько раз подумать прежде чем это всё использовать – ведь все эти эффекты создавались явно не для того чтобы скрывать элементы со страницы

Как скрыть элемент использую присвоение классов в jQuery

Один из самых “нормальных” вариантов �� это присваивать временные классы. Кстати говоря, такие классы лучше выделить как-то на фоне остальных, например, мне понравилась идея добавлять приставку .js- как по мне, очень удобно.

В самом начале статьи уже рассматривались варианты скрытия на CSS, самый адекватный это:

.js-hidden

и как всегда вся магия jQuery умещается в несколько строк:

$(function()< $('.my-selector').click(function()< $(this).addClass('js-hidden'); $(this).removeClass('js-hidden'); $(this).toggleClass('js-hidden'); >); >);

$(this).addClass(‘js-hidden’); – добавляем класс тому объекту, по которому мы кликнули,
$(this).removeClass(‘js-hidden’); – убираем класс по клику,
$(this).toggleClass(‘js-hidden’); – автоматом убираем или добавляем класс, по очереди.

Обратите внимание, что если вы хотите закрыть “попап” или другой элемент на странице, вам нужно заменить $(this) на свой селектор $(‘.mySelector’), и не забывайте, одну очень важную вещь – прятать нужно не все элементы на странице, а только тот, который относится к текущей кнопке. Да, это означает что вам придется искать родителя, начиная от элемента по которому вы кликнули.

Надеюсь, вы сами разберетесь какие из этих советов можно считать “вредными”, а какие можно смело применять ��

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Читайте також:

2 коментаря

прикол :

Какой эффект он производит? Полностью скрывает элемент со страницы, его не чувствуют другие элемент, как будто его попросту не было.

Dmitriy :

Да, в большинстве случаев, кроме .remove(), элементам добавляется стиль “display: none;” и они остаются на странице, вы можете их в дальнейшем отобразить в своих скриптах. А вот если используете remove(), то элемент удаляется и дальнейшее добавление возможно уже либо через append(), prepend(), ajax ну или каким-либо другим способом. Зависит от ситуации ��

Залишити відповідь Скасувати відповідь

Щоб відправити коментар вам необхідно авторизуватись.

Читать:

Как отключить виртуальное окружение python