Показать и скрыть элемент на JS
На этом уроке вы узнаете, как на языке JavaScript показать и скрыть любой элемент на сайте, кликнув по кнопке.
HTML структура
В HTML разметке присутствует кнопка, имеющая начальное положение «Показать элемент» и скрытый текстовый блок. При клике по кнопке, блок с текстом показывается. При повторном клике по кнопке, данный блок скрывается. Зададим текстовому блоку класс content, отвечающий за оформление и класс hidden. Из названия последнего понятно, что этот класс скрывает контент, пока пользователь не сделает клик по кнопке.
CSS код
Разукрасим нашу кнопку линейным градиентом и установим легкую тень.
.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, то поменять на кнопке надпись на «Скрыть элемент». В противном случае оставить, как было «Показать элемент».
В JavaScript Скрыть/показать элемент
Как я могу скрыть ссылку «Редактировать» после ее нажатия? а также могу ли я Скрыть текст «lorem ipsum» при нажатии edit?
10 ответов
вы также можете использовать этот код для отображения / скрытия элементов:
Примечание разницу между style.visibility и style.display is при использовании visibility: hidden в отличие от display: none тег не отображается, но для него выделяется место на странице. Тег отображается, его просто не видно на странице.
посмотреть этот ссылке чтобы увидеть различия.
Я хотел бы предложить вам в jQuery.
Я бы предложил это, чтобы скрыть элементы (как предлагали другие):
но чтобы сделать элементы видимыми, я бы предложил это (вместо display = ‘block’):
причина в том, что использование display = ‘block’ вызывает дополнительные поля/пробелы рядом с элементом, который становится видимым как в IE (11), так и в Chrome (версия 43.0.2357.130 m) на странице, над которой я работаю.
при первой загрузке страницы в Chrome, элемент без стиля атрибут будет отображаться следующим образом в инспекторе DOM:
спрятав его с помощью стандартного JavaScript делает это, как и ожидалось:
сделать его видимым снова с помощью display = ‘block’ изменяет его на это:
что не то же самое, что было изначально. В большинстве случаев это может не иметь никакого значения. Но в некоторых случаях это приводит к аномалиям.
использование display = » восстанавливает его исходное состояние в инспекторе DOM, поэтому кажется, что лучший подход.
вы должны думать JS для поведения и CSS для визуальных конфет как можно больше. Изменив свой HTML немного:
вы сможете переключаться с одного вида на другой, просто используя правила CSS:
и JS-код, который переключается между двумя классами
хотя на этот вопрос уже много раз отвечали, Я думал, что добавлю к нему более полный и твердый ответ для будущих пользователей. Основной ответ решает проблему, но я считаю, что лучше знать/понимать некоторые из различных способов показать/скрыть вещи.
изменение отображения с помощью css ()
это то, как я это делал, пока не нашел некоторые из этих других пути.
изменение отображения с помощью addClass () / removeClass ()
при настройке примера для этого я на самом деле столкнулся с некоторыми недостатками этого метода, которые делают его очень ненадежным.
изменение дисплея с помощью toggle ()
изменение дисплея с помощью hide () / show ()
в целом, я бы сказал, что лучше будет Скрыть()/показать() если вам конкретно нужен переключатель. Надеюсь, вы нашли эту информацию полезной.
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Кнопка для скрытия контента на JavaScript.
Давайте рассмотрим реализацию кнопки для скрытия части контента на HTML с использованием JavaScript. При нажатии на кнопку будет появляться скрытый контент. В записи представлены простые стили для большей гибкости, вы можете сами стилизовать элементы.
Простая кнопка скрывающая часть контента
Для начала разберём простую реализацию, а ниже будем добавлять дополнения для усовершенствования скрипта.
.container_for_tab – контейнер в котором находятся все внутренности таба,
.but_for_tab – кнопка для открытия,
.tab_content – блок со скрытым контентом,
.hidden_block – класс которому мы будим добавлять свойства display: none для скрытия блока,
.visible_block – класс которому мы будим добавлять свойства display: none для проявления блока.
JavaScript
Всю работу выполняет JavaScript функция представленная ниже. В качестве параметра вам нужно передать элементы участвующие в реализации.
Простая кнопка скрывающая часть контента + иконкой
Теперь давайте добавим иконку стрелочки вниз, которая после нажатия будет меняться на кнопку вверх.
Указав соответствующий класс вы можете указать свои иконки.
Здесь из нового мы добавим только иконку через элемент с определенным классом и спец. классом для создания иконки.
JavaScript
В JavaScript мы добавим код проверки на наличие иконки и добавим переменную в которую запишем элемент иконки.
Простая кнопка скрывающая часть контента + меняющаяся надпись
Добавим новый элемент в который пропишем текст для кнопки. Текст кнопки “Показать ещё” будем менять на “Скрыть”.
Как скрыть элементы в HTML?
Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.
В CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.
Спрятать по имени класса (class)
HTML пример
CSS пример
Код выше скроет все элементы на странице с
Спрятать по id
HTML пример
CSS пример
Код выше скроет все элементы на странице с
Спрятать по другим атрибутам
В случае, если у вас нет id или class у элемента, то его все равно можно скрыть. Альтернативно можно использовать другие атрибуты, как показано в примере ниже.
HTML пример
CSS пример
Вы так же можете убрать элемент другими свойствами CSS, например:
Описание CSS свойств из примера выше
opacity: 0 — устанавливает прозрачность до 0, тем самым элемент совсем не будет показан на странице, чтобы снова показать нужно установить 0.1 (10% видимости элемента), 0.2, … 1.
visibility: hidden — схожее свойство с display: none
width: 0;height: 0; — если их поставить к нулю, то у вашего элемента высота и ширина будет равно 0, тем самым он вообще не будет показывать на экране.
jQuery
Элементы на странице так же можно скрыть при помощи jQuery. Вы должны сначала установить библиотеку jQuery, прежде чем начать пользоваться ее функциями.
Обращаться к элементам можно таким же образом, как и в CSS. Проблема CSS в том, что с его помощью можно только прятать элементы.
jQuery позволяет удалять элементы, чтобы они не были видны даже при рассмотрении исходного кода страницы.
Удалить элемент с помощью класса (class)
Скрипт ниже удалить все элементы со страницы с классом sidebar.
HTML пример
jQuery пример
Удалить элемент с помощью id
Скрипт ниже удалить элемент со страницы с id sidebar.
HTML пример
jQuery пример
Удалить элемент по атрибуту
Таким образом можно удалить все что угодно на странице.
JavaScript
JavaScript очень мощный сам по себе, но не многие знаю как им пользоваться, так как для начинающего разработчика, язык является достаточно сложным. Ниже я написал несколько пример того, как можно скрыть элементы используя JavaScript.
Удалить элемент с помощью class
HTML пример
JavaScript пример
Пример выше удалит элемент с id именем sidebar.
Удалить элемент по атрибуту
HTML пример
JavaScript пример
Чтобы удалить все элементы, используйте цикл, как на примере ниже:
Вывод
Ни один способ описанный выше не является наилучшим для удаления элементов на странице так как лучше всего найти исходник проблемы и удалить от туда. Например найти html страницу где находится ненужный элемент страницы и удалить его от туда. Лучше этого ничего нельзя сделать.
Если у вас остались какие-нибудь вопросы, пишите их в комментарии.