Javascript показать скрыть div

Javascript показать скрыть div

2016-09-19 / Вр:09:22 / просмотров: 23089

Сегодня я расскажу, как скрыть блок

Вот такой будет у нас стандартный код на HTML:

Результат будет вот таким:

средствами HTML , CSS, JS и Bootstrap" w />

Теперь скроем блок №1 – « Здравствуйте, это мой блок №1 ».

Как скрыть элемент блока на сайте – HTML5

HTML5 очень функционален и в нем есть много дополнительных тегов и атрибутов, которые упрощают жизнь создателям сайтов. Одним из таких атрибутов является « hidden ».
Атрибут « hidden » сделает блок

Результат будет вот таким:

Как видите, блок №1 спрятался и остался только блок №2 , так как я не прописал к нему тег

Как скрыть элемент блока на сайте – CSS

В CSS есть несколько способов, чтобы скрыть элемент

Теперь в CSS пропишите вот такой стиль:

Блок с классом « blok1 » исчезнет:

Можно скрыть блок, используя прозрачность « opacity »:

Можно скрыть блок, используя «visibility» со значением «hidden» :

Как скрыть элемент блока на сайте – JavaScript

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

blok1 – это класс

Можно и вот таким способом:

Тогда код будет вот таким:

Можно и вот таким способом:

Как скрыть элемент блока на сайте для мелких экранов – BootStrap3

Если вам нужно спрятать большую картинку или блок

Мобильные устройства ( 1200px) — .visible-lg, .hidden-lg

Например, скроем блок для маленьких устройств:

Вот и все. Надеюсь статья была вам очень полезная.

Простейшее решение, позволяющее показать/скрыть HTML-элемент документа, используя JavaScript. Подробно описание сути процесса и его особенностей.

Читайте также:  Float window что это

Обычными средствами срыть (англ. hide) или показать (англ. show) HTML-элемент документа не представляется возможным. Для этого используется CSS-свойство display или visibility. Отличие между ними состоит в том, что visibility, хоть и делает HTML-элемент невидимым, но место, которое он занимает, остаётся за ним. Понятно, что гораздо чаще используется именно display.

display (с англ. отображение) – многоцелевое свойство, которое определяет, как элемент должен отображаться в документе.

Список возможных значений CSS-свойства display, понимаемых различными браузерами, не велик, но и этого вполне достаточно.

  • block — элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега SPAN , заставляет его вести подобно блокам, т.е. происходит перенос строк в начале и конце содержимого.
  • inline — элемент отображается как встроенный. Применение этого значения для блочных элементов, например тега DIV , заставляет его вести подобно встроенным, т.е. его содержимое будет начинаться с того места, где окончился предыдущий элемент.
  • list-item — элемент выводится как блочный и добавляется маркер списка.
  • none — скрывает элемент в документе. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было.

Понятно, что для того, чтобы изменить CSS-свойство того или иного HTML-элемента необходимо использовать скриптовый язык программирования. В нашем случае это JavaScript. Но всё по порядку.

Первым делом надо определиться, как именно обратиться к HTML-элементу документа. Для этого можно воспользоваться методом getElemetById объекта document , который возвращает ссылку на HTML-элемент документа по значению атрибута id . Например:

Теперь нам нужно получить доступ к свойствам стиля соответствующего HTML-элемента. Для этого используется свойство style . Например:

Остаётся лишь создать элемент управления, который бы выполнял смену значения CSS-свойства display, по какому либо событию, например onclick (клик мышью). Здесь стоит обратить внимание на тот факт, что для решения поставленной задачи, понадобится проверять текущее значение CSS-свойства display и менять его на «противоположное». В нашем случае, для скрытия, будем использовать значение none, а для отображения «пусто». Во втором случае мы убираем CSS-свойство display в соответствующем элементе, что позволит корректно работать как с блочными так и встраиваемыми HTML-элементами.

Читайте также:  Intel core i7 4820k характеристики

Для наглядности приведу следующий пример:

Обратите внимание, что тег DIV имеет атрибут style со значением display:none . Таким образом? мы задаём значение CSS-свойства display по умолчанию равное none, т.е. HTML-элемент изначально будет скрыт.

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

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

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

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

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

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

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

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

Ссылка на основную публикацию
Insomnia the ark цена свободы
Очередь просмотра Очередь Удалить все Отключить YouTube Premium Хотите сохраните это видео? Пожаловаться Пожаловаться на видео? Выполните вход, чтобы сообщить...
High speed hdmi cable with ethernet
Приветствую всех посетителей блога о компьютерах. Сегодня бы очень хотелось поведать читателям о так называемом HDMI кабеле, с помощью которого...
Highscreen pure j 4pda прошивка
Внимание! Использование инструментов для перепрошивки неопытными пользователями может привести к выходу аппарата из строя. Установка этого обновления приведет к полному...
Instagram как выложить фото с компьютера
Зачем нужно выкладывать фото и видео в Инстаграм через компьютер? Инстаграм придумали, чтобы можно было быстро загрузить фото с телефона....
Adblock detector