Display none in javascript function

Видимость элемента в JavaScript и CSS. Свойство display: none и block

Довольно часто возникает необходимость узнать, является ли какой-либо объект видимым на странице. Как правило, решение упирается в получение информации о css-свойстве объекта display . Обычно мы проверяем на соответствие этого свойства значению block или none , однако, сейчас появились другие значения этого свойства, например, inline-block , flex , grid .

Проверка на стилевое свойство display: none

Если у вас для элемента явно назначено стилевое свойство display: none , то вы можете легко изменять это свойство на display: block или flex , или grid по необходимости. Что значит «явно назначено стилевое свойство»? Это подразумевает наличие атрибута style=»display: none» непосредственно в том теге, который вы хотите впоследствии отображать, как правило при клике на другом элементе, расположенном в непосредственной близости от скрытого.

Например, у вас есть такой код:

Lorem Ipsum не только успешно пережил без заметных изменений пять веков , но и перешагнул в электронный дизайн . . . . . в шаблонах которых используется Lorem Ipsum . < / p >

this . nextElementSibling . style . display = this . nextElementSibling . style . display == ‘none’ ? ‘block’ : ‘none’ ;

В этом коде для изменения стилевого свойства display для элемента мы используем тернарный оператор вместо конструкции if. else .

Кликните, чтобы узнать, что такое Lorem Ipsum?

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

Минусом такого подхода является то, что явное назначение стилевого свойства в виде атрибута style=»display: none» бывает крайне редко в верстке. Чаще оно добавляется в коде JavaScript, и им же потом и удаляется.

Определяем свойство display, описанное во внешнем css-файле

Если же display: none установлен в css-стилях во внешнем файле или общих тегах для данной страницы, то нужно использовать метод window.getComputedStyle() , который позволяет добраться до стилевых свойств определенного элемента, которые описаны не в нем самом. А затем используем для переключения видимости спрятанного элемента код, похожий на предыдущий вариант.

< p class = "hide-me" >Есть много вариантов Lorem Ipsum , но большинство из них имеет не всегда приемлемые . . . середине абзаца .

Также все другие известные генераторы Lorem Ipsum используют один и тот же текст , который они просто повторяют , пока не достигнут нужный объём . Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором . Он использует словарь из более чем 200 латинских слов , а также набор моделей предложений . В результате сгенерированный Lorem Ipsum выглядит правдоподобно , не имеет повторяющихся абзацей или «невозможных» слов . < / p >

Примечание: вместо display: block вы можете использовать display: flex или grid .

Проверяем работоспособность примера:

Где взять Lorem ipsum

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или «невозможных» слов. Можно сгенерировать текст Lorem ipsum с помощью плагина Emmet, доступного для большинства современных редакторов кода.

Добавление/удаление класса со свойством display: none

Для работы с последующими примерами нам понадобится описать ряд css-правил для различных классов, чтобы понимать, какие изменения происходят при добавлении/удалении какого-либо класса.

CSS-стили

Пример с переключением класса со свойством display: none !important

Когда в любое css-свойство вы добавляете !important , это означает, что оно переопределяет даже те свойства, которые назначены в атрибуте style , повышая таким образом приоритет данного свойства для атрибута class . Поэтому здесь имеет смысл использовать такое JavaScript-свойство, как classList , которое содержит псевдомассив из всех классов, назначенных для данного элемента. Свойство classList имеет в своем арсенале замечательный метод toggle(‘имя_класса’) , который работает, как переключатель классов: если указанный в скобках класс назначен данному элементу, он его убирает, если нет — добавляет. Именно им мы и воспользуемся в примере ниже для переключения видимости спрятанных изначально элементов списка :

Показать абзац 1 с Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eveniet possimus, esse nihil tenetur vitae fugit repellendus quisquam neque provident numquam impedit a magnam harum, hic quas sint odit, facilis. Показать абзац 2 с Lorem ipsum Delectus, repellendus, quaerat? Fugiat non repellat voluptas in, ea neque impedit hic voluptatum dicta molestias illum beatae inventore quos blanditiis assumenda autem ad nobis sint mollitia doloremque nulla quae dolores. Показать абзац 3 с Lorem ipsum Natus culpa voluptas velit unde consequatur voluptatum consequuntur sed quibusdam! Nulla consectetur aperiam rem iure, illum, commodi ut earum enim totam. Tenetur numquam fugit totam ipsam debitis cupiditate quam quae! Показать абзац 4 с Lorem ipsum Dolorem ab, expedita est ducimus voluptatibus, debitis eveniet architecto perferendis, porro maiores eos. Inventore nisi nesciunt magni vero deleniti recusandae velit! Repellat natus aspernatur, et veritatis laboriosam porro corporis eos. Показать абзац 5 с Lorem ipsum Quas quam, facere. Itaque, deleniti, reiciendis. Esse soluta, minima. Sed odio earum cumque fugiat, modi inventore. Veritatis alias molestias unde, doloribus error corporis harum, illum esse sint eligendi, incidunt impedit.

В том случае, если у нас есть необходимость показать/спрятать блок, у которого задан и display: none , и display: flex , использование переключения класса будет также неплохим выходом, например так:

Показать 1 flex-блок

Показать 2 flex-блок

Показать 3 flex-блок

Код примера практически тот же, за исключением селектора, с помощью которого мы выбираем элементы для обработки события клика.

this . firstElementChild . textContent = this . firstElementChild . textContent == ‘Показать’ ? ‘Спрятать’ : ‘Показать’ ;

Если совместить 2 предыдущих примера, то код можно сократить, просто указав нужные селекторы в первой строке JS-кода:

this . firstElementChild . textContent = this . firstElementChild . textContent == ‘Показать’ ? ‘Спрятать’ : ‘Показать’ ;

Возможно, вам будет интересно узнать, как решается проблема отображения/скрытия элементов в Bootstrap с помощью разных классов, в том числе и для разных разрешений экранов.

Использование offsetHeight и/или offsetWidth элемента

Когда элемент скрыт, его высота и ширина = 0. Поэтому можно проверить значения этих свойств на совпадение с 0 или на false|true — и действовать в соответствии с этими показателями. Однако проверять мы будем не стилевые свойства, как в примере выше, а значение offsetHeight или offsetWidth элемента. Если любое из них равно 0, то элемент скрыт.

Кликните, чтобы узнать, откуда появился Lorem Ipsum?

Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32

Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 «de Finibus Bonorum et Malorum» Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.

Почему Lorem Ipsum используется?

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации «Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст..» Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам «lorem ipsum» сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые — намеренно (например, юмористические варианты).

Источник

Style display Property

The display property sets or returns the element’s display type.

Elements in HTML are mostly «inline» or «block» elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.

The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none , it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.

Tip: If an element is a block element, its display type can also be changed with the float property.

Browser Support

Syntax

Return the display property:

Property Values

Value	Description
block	Element is rendered as a block-level element
compact	Element is rendered as a block-level or inline element. Depends on context
flex	Element is rendered as a block-level flex box. New in CSS3
inline	Element is rendered as an inline element. This is default
inline-block	Element is rendered as a block box inside an inline box
inline-flex	Element is rendered as a inline-level flex box. New in CSS3
inline-table	Element is rendered as an inline table (like ), with no line break before or after the table list-item Element is rendered as a list marker This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to «inline») none Element will not be displayed run-in Element is rendered as block-level or inline element. Depends on context table Element is rendered as a block table (like ), with a line break before and after the table) table-caption Element is rendered as a table caption (like ) table-cell Element is rendered as a table cell (like and ) table-column Element is rendered as a column of cells (like ) table-column-group Element is rendered as a group of one or more columns (like ) table-footer-group Element is rendered as a table footer row (like ) table-header-group Element is rendered as a table header row (like ) table-row Element is rendered as a table row (like table-row-group Element is rendered as a group of one or more rows (like ) initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit Technical Details Default Value: inline Return Value: A String, representing the display type of an element CSS Version CSS1 More Examples Example Difference between the display property and the visibility property: function demoDisplay() < document.getElementById(«myP1»).style.display = «none»; > function demoVisibility() document.getElementById(«myP2»).style.visibility = «hidden»; > Example Toggle between hiding and showing an element: function myFunction() < var x = document.getElementById(‘myDIV’); if (x.style.display === ‘none’) < x.style.display = ‘block’; > else < x.style.display = ‘none’; > > Example Difference between «inline», «block» and «none»: function myFunction(x) < var whichSelected = x.selectedIndex; var sel = x.options[whichSelected].text; var elem = document.getElementById(«mySpan»); elem.style.display = sel; > Example Return the display type of a element: Источник Оцените статью Вам также может понравиться Ящики с усами python pandas.plotting.boxplot# Make a box-and-whisker plot Пример использования свойства CSS table-layout. table-layout¶ Свойство table-layout определяет, как Пример использования свойства CSS table-layout. HTML Размеры таблицы HTML таблицы могут иметь разные Пример использования свойства CSS table-layout. table-layout¶ Свойство table-layout определяет, как Правообладателям Политика конфиденциальности Контакты