Въпрос към урок: Скриване на елементи от курс: HTML5 и CSS3

Може ли

Уеб дизайн HTML CSS Програмиране Atom Notepad++ HTML5 и CSS3
инж. Юлиан Ангелов

и как да се "върнат" скрити елементи след display: none или visibility: hidden? Имам интересни идеи за респонсив дизайн на страничка, но за целта ми трябва да заложа предварително елементи на местата им и да ги скрия, а когато им дойде времето да ги открия обратно.

Аула Ментор

Здравейте, Юлиан, да, можете да "върнете" скрити елементи след display: none или visibility: hidden като просто промените тези стилове обратно в кода ви. За display: none, можете да го промените обратно на display: block (или друг подходящ display стил). За visibility: hidden, можете да го промените обратно на visibility: visible.

  1. Стилове и CSS - За да контролирате видимостта на елементи във вашия HTML код, можете да използвате стилове и CSS. Display и visibility са два стилови атрибута, които могат да контролират дали елементът е видим или не.
  2. Използване на display - Когато установите стиловия атрибут display на none за даден HTML елемент, този елемент (и неговите дъщерни елементи) ще бъде напълно премахнат от потока на документа и няма да заема пространство. За да върнете този елемент, просто променете стойността на display обратно на block, inline, inline-block, flex, grid или който и да е друг тип на display, подходящ за вашия случай. Пример:
/* Скрива елемента */
.yourElement {
    display: none;
}

/* Връща елемента обратно */
.yourElement {
    display: block; /* или друг подходящ display тип */
}
  1. Използване на visibility - Когато установите стиловия атрибут visibility на hidden за даден HTML елемент, елементът ще бъде невидим, но все още ще заема своето място в потока на документа. За да върнете видимостта на този елемент, променете стойността на visibility обратно на visible. Пример:
/* Скрива елемента */
.yourElement {
    visibility: hidden;
}

/* Връща елемента обратно */
.yourElement {
    visibility: visible;
}
  1. Динамично променяне на стилове с JavaScript - Можете да използвате JavaScript за динамично променяне на стиловете на вашите елементи, в зависимост от условията, които сте задали (например, размерът на екрана). Това е особено полезно при създаването на респонсивен дизайн. Пример:
/* Скрива елемента */
document.querySelector('.yourElement').style.display = 'none';

/* Връща елемента обратно */
document.querySelector('.yourElement').style.display = 'block'; /* или друг подходящ display тип */

Вашият отговор

Научи компютърните програми онлайн от топ експертите на България
Регистрацията в АУЛА ви дава:
  • 20 безплатни урока
  • Трикове и тънкости за софтуера
  • Отговори на вашите въпроси
    • Регистрация