Властивості css display і visibility 6 прикладів приховування
Властивості HTML display і visibility використовуються, щоб вивести або приховати HTML-елементи. Але тоді яка між ними різниця? Щоб зрозуміти це, подивіться на наведений нижче малюнок, тут я використовував три елементи div:
Ми використовуємо три елементи div. які показані в розділі 1 (з лівого боку). Спочатку всі елементи div виводяться без застосування властивостей display або visibility.
Подивитися онлайн демо-версію і код
У другій частині малюнка показані div 1 і div 3. Для div 2 задано visibility: hidden. але ми все одно бачимо простір, яке займає цей елемент.
Подивитися онлайн демо-версію і код
У третьому розділі також відображаються тільки div 1 і div 3. в той час як div 2 прихований за допомогою властивості HTML display none. Можна побачити різницю: div 3 зміщується вгору і для div 2 більше не відводиться простір.
Подивитися онлайн демо-версію і код
Синтаксис властивості CSS visibility
Ось, як використовувати властивість CSS visibility:
Значення за замовчуванням для властивості CSS visibility - visible. Також можна використовувати:
Дане значення використовується в HTML-таблицях.
Синтаксис властивості CSS display
Це дозволяє приховати елемент, для якого задано значення даного властивості. Саме його я застосував для розділу 3 в наведеному вище прикладі.
Властивість HTML display також використовується, щоб змінити поведінку малих або блокових елементів:
Цей код задає для блочного елемента поведінку сатиричного. Наприклад, div являє собою блоковий елемент. Застосувавши до нього display: inline. ми задаємо для нього поведінку сатиричного елемента:
Значення block робить протилежне. Наприклад, елемент span є рядковим. Якщо ми застосуємо до нього display: block. він буде вести себе як блоковий елемент.
Приклад застосування властивості display для відображення / приховування меню
Я використовував елемент div. який містить маркований список
- , елементи списку і гіперпосилання. Посилання являють собою пункти меню.
- Батьківський div окреслено чорною рамкою і займає всю доступну ширину;
- span окреслено синьою рамкою, всередині div він займає тільки необхідне для відображення простір і починається з тієї ж самої рядки;
- Абзац, який окреслений червоною рамкою, також займає весь доступний простір і починається з нового рядка.
Для розробки цього меню використовувався ряд інших властивостей CSS. Властивість display спочатку задано не було. Це означає, що меню буде відображатися.
При кліці по посиланню приховати меню для події кліка використовується код JQuery. щоб застосувати властивість display: none до батьківського елементу div:
Подивитися онлайн демо-версію і код
Батьківський div містить меню, яке являє собою поєднання елементів ul. li і . При використанні display: none елемент div буде приховано, як і всі меню. Коли меню зникає, посилання переміщуються вгору, займаючи простір меню, тому що при використанні HTML display none елемент, до якого застосовано властивість, більше не буде займати відведене для нього простір.
Якщо після цього ви натиснете на посилання показати меню, код jQuery додасть значення display: initial. Це зробить меню видимим, а посилання змістяться вниз.
Демо-версія меню з використанням властивості visibility
Я використовую той же приклад, що і вище, але на цей раз застосую властивість CSS visibility. щоб показати і приховати меню. Різниця полягає у використовуваному коді jQuery:
При натисканні на посилання приховати меню, меню ховається. При кліці по посиланню показати меню, додається властивість visibility: visible. і меню знову відображається:
Подивитися онлайн демо-версію і код
Приклад використання властивості CSS visibility для HTML-таблиці
У наступному прикладі ми створимо HTML-таблицю за допомогою фреймворка Bootstrap. Таблиця містить п'ять рядків, які спочатку відображаються. На даному етапі таблиця виглядає наступним чином:
Подивитися онлайн демо-версію і код
Для рядків таблиці використані різні класи, щоб задати їх стилі. Наприклад, danger. active. warning і т.д. Рядки таблиці пронумеровані від 1 до 5 (перший стовпець зліва).
Тепер я використовую властивість visibility для другого рядка, щоб приховати її. Це робиться в такий спосіб:
Таким чином значення collapse також використовується для елементів таблиці. Воно застосовується для видалення рядка, при цьому структура таблиці не змінюється. Подивіться на наведений нижче малюнок і на код демо-версії:
Подивитися онлайн демо-версію і код
Другий рядок, хоч я знаю, але структура таблиці залишається незмінною. Якщо ви використовуєте значення collapse для будь-яких інших елементів, воно буде працювати, як значення hidden.
Застосування властивості CSS display до таблиці
Тепер той же самий приклад, за винятком того, що я буду використовувати властивість HTML display. щоб приховати рядок в таблиці:
Подивитися онлайн демо-версію і код
Другий рядок зникла, а третій рядок переміщується вгору, щоб зайняти її місце.
Використання display для малих елементів
Властивість CSS display також використовується для зміни поведінки малих і блокових елементів.
Нагадаю, що блокові елементи займають весь доступний їм простір і починаються з нового рядка. Наприклад, абзаци або блоки div - це блокові елементи.
Рядкові елементи займають лише необхідне для відображення простір і не починаються з нового рядка. Як приклади малих елементів можна привести span. тег посилання і т.д.
Властивість HTML display дозволяє змінювати поведінку малих і блокових елементів.
Щоб змінити поведінку блочного елемента на поведінку сатиричного:
Щоб змінити поведінку сатиричного елемента на поведінку блочного:
У наступному прикладі поведінку елемента span змінюється на поведінку блочного елемента. А поведінка абзацу за допомогою властивості CSS display змінюється на поведінку сатиричного елемента.
Щоб зрозуміти, в чому полягає різниця, спочатку подивіться на наведений нижче малюнок і вихідний код, в якому властивість HTML display ще не застосовано:
Подивитися онлайн демо-версію і код
На сторінці демо-версії відображений батьківський div. а всередині нього span і абзац. Спочатку їх поведінка є стандартним для цих елементів:Тепер за допомогою HTML display block я зміню поведінку span на поведінку блочного елемента, а поведінка абзацу на поведінку сатиричного. Батьківський div залишається без змін. Дивіться результат і демо-версію:
Подивитися онлайн демо-версію і код
span починається з нового рядка і межі абзацу закінчується там, де закінчується його текст. Він не займає всю доступну ширину, як div або span.
Переклад статті «CSS display and visibility: 6 examples to show / hide HTML elements» був підготовлений дружною командою проекту Сайтобудування від А до Я.