Javascript скрыть элемент: Скрыть / показать элементы JavaScript

3 года назад

158 просмотров

Как скрыть элемент с помощью CSS?

Категория: Сайтостроение, Опубликовано: 2016-12-02
Автор: Юлия Гусарь

Приветствую вас на сайте Impuls-Web!

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

Способов скрыть элемент css свойствами достаточно много. Если поинтересоваться этим вопросом в поисковиках, то можно найти различные варианты решения этой задачи от самых простых до самых изощренных. Для начинающего веб-разработчика это может стать настоящей проблемой, так как пока вы все их перепробуете и определите для себя самые простые и рабочие из них, вы потратите на это значительное количество времени и своих драгоценных нервов.

Навигация по статье:

• Полное срытие элемента
• Скрываем элемент визуально
• Делаем прозрачный элемент
• Сворачиваем элемент

Я предлагаю рассмотреть четыре наиболее простых и эффективных способа скрыть элемент css, которые вы можете использовать в 99% случаях, которые на 100% рабочие и которые вас никогда не подведут.

Полное срытие элемента

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

Пример использования:

.block{ display:none; }

Для отображения элемента нужно изменить значение none на значение block.
То есть если у вас на странице будет 3 рядом стоящих блока и для блока с номером 2 вы используете свойство display:none, то выглядеть это будет так:

Скрываем элемент визуально

Если нам нужно скрыть элемент css но при этом он должен оставаться на странице мы можем использовать свойство visibility со значением hidden. При этом блок создается на странице, но его не видно.

Пример:

.block{ visibility: hidden; }

Если у нас есть 3 блока и для второго блока применено это свойство, то выглядеть это будет так:

Для того чтобы показать скрытый блок, нужно значение hidden заменить на visible. Например, можно сделать, что бы блок появлялся при наведении на него курсором:

.block:hover{ visibility: visible; }

Делаем прозрачный элемент

Данный способ по работе чем то похож на предыдущий. Мы можем скрыть элемент css, придавая ему абсолютную прозрачность. Сделать это можно с помощью свойства opacity со значением 0.

CSS:

.hide-me{ opacity: 0; }

Показать блок можно изменив 0 на 1. По аналогии с предыдущим свойством можно использовать при наведении курсора:

.hide-me:hover{ opacity: 1; }

Сворачиваем элемент

С помощью данного свойства мы можем скрыть элемент, свернув его по вертикали и сделать его не видимым на странице. Делается это с помощью двух css свойств. Вначале мы задаем высоту блока равную 0 (height:0px;), а затем задаем отображение элемента только в пределе этого блока с помощью свойства overflow со значением hidden.

.folded{ height:0px; overflow: hidden; }

Для достижения эффекта скрытия нужно, что бы у скрытого элемента не было видимых границ.

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

Надеюсь, данная статья поможет вам решить поставленную перед вами задачу. Если у вас возникнут вопросы, вы можете задать их в комментариях. А на сегодня у меня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

элементов скрытия JavaScript — javatpoint

следующий → ← предыдущая В JavaScript мы можем скрыть элементы, используя style. display или style.visibility . Свойство visibility в JavaScript также используется для скрытия элемента. Разница между style.display и style.visibility заключается в том, что при использовании visibility: hidden, тег не виден, но место выделено. Использование display: none, тег тоже не виден, но места на странице не выделено. В HTML мы можем использовать атрибут hidden , чтобы скрыть указанный элемент. Когда атрибут hidden в HTML имеет значение true, элемент скрыт, или когда значение false, элемент отображается. Синтаксис Общий синтаксис для скрытия элемента с использованием style.hidden и style.visibility приведен ниже. Использование style.hidden document.getElementById(«элемент»).style.display = «нет»; Использование style. visibility document.getElementById(«элемент»).style.visibility = «нет»; Теперь давайте рассмотрим несколько примеров, чтобы понять скрытие элементов в javascript. Пример 1 В этом примере мы увидим, как удалять элементы с помощью JavaScript style.display свойство. Здесь есть элемент div и элемент абзаца, который скрывается при нажатии данной кнопки HTML. Мы должны нажать кнопку «Нажми меня!» кнопку, чтобы увидеть эффект. <голова> <название> стиль.дисплей <тело> Добро пожаловать на javaTpoint.com Пример свойства style.display JavaScript Это элемент div. Это элемент абзаца. <кнопка onclick = "fun()" id = "btn"> Нажми на меня! <скрипт> функция весело () { document. getElementById(«div»).style.display = «нет»; document.getElementById(«p»).style.display = «нет»; } Протестируйте сейчас Выход После выполнения вывод будет — При нажатии на кнопку вывод будет — Пример2 В этом примере мы увидим, как скрыть элементы с помощью свойства JavaScript style.visibliity . Здесь элемент div и элемент абзаца скрываются, но их пространство все еще выделено. Мы должны нажать кнопку «Нажми меня!» кнопку, чтобы увидеть эффект. <голова> <название> стиль.видимость <тело> Добро пожаловать на javaTpoint.com Пример свойства JavaScript style.visibility Это элемент div. Это элемент абзаца. <кнопка onclick = "fun()" id = "btn"> Нажми на меня! <скрипт> функция весело () { document.getElementById(«div»).style.visibility = «скрытый»; document.getElementById(«p»).style.visibility = «скрытый»; } Протестируйте сейчас Выход После выполнения вышеуказанного кода вывод — При нажатии на кнопку вывод будет — Пример3 В этом примере мы используем свойства JavaScript style.display и style.visibility , чтобы увидеть разницу между ними. Здесь есть элемент div и элемент заголовка , к которым мы применяем свойства. Мы прячем div , применив свойство style.display , и скрыв элемент , применив свойство style.visibility . Мы должны нажать кнопку «Нажми меня!» кнопку, чтобы увидеть эффект. <голова> <название> JavaScript скрывает элементы <тело> Добро пожаловать на javaTpoint.com Использование свойств style.visibility и style.display Это элемент div. Это элемент абзаца. Это заголовок после элемента абзаца. <кнопка onclick = "fun()" id = "btn"> Нажми на меня! <скрипт> функция весело () { document.getElementById(«div»).style.visibility = «скрытый»; document.getElementById(«заголовок»).style.display = «нет»; } Протестируйте сейчас Выход В выводе мы видим, что элемент div (к которому мы применили свойство style.visibility ) скрывается, но по-прежнему выделяет пространство. Но заголовок (к которому мы применили свойство style. display ) скрывается и не выделяет места. После нажатия кнопки результат будет — Следующая темаJavaScript prompt() ← предыдущая следующий →

Как скрыть элементы в адаптивном макете

Чтобы скрыть элемент в адаптивном макете, нам нужно использовать свойство отображения CSS со значением «none» вместе с правилом @media. Содержимое второго элемента

с классом «hidden-mobile» будет скрыто на устройствах размером менее 767 пикселей.

Пример скрытия элемента на очень маленьких устройствах:

 

  <голова>
    
    <стиль>
      @media (максимальная ширина: 767 пикселей) {
        .скрытый-мобильный {
          дисплей: нет;
        }
      }
    
  
  <тело>
     
Привет
 
    
Например, есть какой-то текст.
    
Этот текст будет скрыт на больших устройствах. 
    
Например, есть какой-то текст.
  
 

Попробуй сам »

Чтобы отобразить элемент на очень маленьких устройствах (телефоны <768 пикселей) и средних устройствах (рабочие столы ≥992 пикселей) и скрыть его на маленьких устройствах (планшеты ≥768 пикселей), вам нужно попробовать следующее.

Пример скрытия элемента на небольших устройствах:

 

  <голова>
    
    <стиль>
      @media (минимальная ширина: 768 пикселей) {
        .текст {
          дисплей: нет;
        }
      }
      @media (минимальная ширина: 992px) {
        .текст {
          дисплей: блок;
        }
      }
    
  
  <тело>
     
Привет
 
    
Например, есть какой-то текст.
    
Этот текст будет скрыт на больших устройствах.
    
Например, есть какой-то текст.
  
 

Попробуй сам »

Решения с Bootstrap

В Bootstrap 3. 4.1 мы можем использовать класс «hidden-xs», чтобы скрыть элемент на телефонах. Итак, в следующем примере мы покажем, как элемент будет скрыт на очень маленьких устройствах.

Пример скрытия элемента на очень маленьких устройствах с помощью Bootstrap:

 

  <голова>
    
    
    <стиль>
      тело {
        фон: нет;
      }
    
  
  <тело>
     
Привет
 
    
Например, есть какой-то текст.
    Этот текст будет скрыт на телефонах.
    
Например, есть какой-то текст.
  
 

Попробуй сам »

В Bootstrap 4 класс hidden-* (также visible-*) больше не существует. Чтобы скрыть элемент на некоторых уровнях или точках останова, вам нужно использовать классы отображения d-*.

Очень маленькое устройство (xs) является точкой останова по умолчанию, если оно не переопределяется более крупной точкой останова. Таким образом, в Bootstrap 4 больше нет инфикса -xs.

В Bootstrap 4.3, чтобы скрыть элемент только на средних устройствах, используйте классы «d-md-none» и «d-lg-block».

Пример скрытия элемента на средних устройствах с Bootstrap:

  <голова> <стиль> тело {
 фон: нет;
 }   <тело>
Привет
Например, есть какой-то текст.