Скрыть или показать элементы в HTML с помощью свойства отображения
следующий → ← предыдущая HTML является основой веб-страниц и используется для структурирования веб-сайтов и веб-приложений. В этом руководстве мы рассмотрим, как использовать свойство отображения для скрытия или отображения компонентов в HTML. Атрибут отображения стиля скрывает и показывает содержимое HTML DOM при доступе к элементу DOM с помощью JavaScript/jQuery. Чтобы скрыть элемент, установите для его свойства отображения стиля значение «нет». document.getElementById(«элемент»).style.display = «нет»; Измените атрибут отображения стиля на «блок», чтобы проиллюстрировать элемент. document.getElementById(«элемент»).style.display = «блок»; Методы демонстрации работы свойства отображения стиля: 1. Создайте несколько разделов, присвойте им идентификатор или класс, а затем стилизуйте их следующим образом: <дел> <дел> <дел> 2. <тип стиля="текст/CSS"> .круглый { радиус границы: 25%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; } .круг { радиус границы: 50%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; } .квадрат { радиус границы: 0%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; } 3. Background-color указывает цвет фона div. #округленный { цвет фона: #F15412; } #круг { цвет фона: #EB1D36; } #квадрат { цвет фона: #F73D93; } 4. document.getElementById выберет div с указанным идентификатором. <тип сценария="текст/javascript"> document. 5. Когда мы нажимаем на div, style.display = «none» заставит его исчезнуть. .style.display = «нет»; Применение функции style.display: <голова>  getElementById(«округленный»).style.display = «нет»; }
document.getElementById(«круг»).onclick = функция() { document.getElementById(«круг»).style.display = «нет»; }
document.getElementById(«квадрат»).onclick = функция() { document.getElementById(«квадрат»).style.display = «нет»; } Вывод: После нажатия квадрат исчезнет: Аналогично, нажатие на круглую фигуру приводит к ее исчезновению: Аналогичным образом, нажатие на закругленную фигуру приводит к ее исчезновению: Следующая темаКак добавить форму входа в изображение с помощью HTML и CSS ← предыдущая следующий → |
Ширина и высота определяют ширину и высоту содержимого, 50% создает круг, радиус границы 0% создает квадратную рамку, а 25% создает закругленную форму, а элементы div располагаются с плавающей запятой, поле справа разделяет их. с зазором справа.
getElementById(«круг»).onclick = функция()В чем разница между видимостью: скрытой и отображаемой: нет в CSS? | Кевин Чисхолм
При видимости:скрытый элемент по-прежнему занимает место. С display:none он эффективно удаляется из DOM.
Скрытие элементов DOM с помощью CSS — распространенная задача.
Некоторые задаются вопросом, должны ли они использовать visibility:hidden или display:none . Итак, давайте подумаем о скрытой видимости и отсутствии отображения. Прежде чем принять решение, задайте себе вопрос: «Хочу ли я, чтобы элемент по-прежнему физически воздействовал на DOM? или я хочу, чтобы элемент выглядел так, как будто он был удален со страницы?» . Это важный вопрос. Разница между visibility:hidden и display:none в CSS заключается в том, как скрытый элемент влияет на DOM.
Когда visibility:hidden применяется к элементу HTML, он не отображается на странице, что имеет смысл. Но важно помнить, что этот элемент HTML по-прежнему влияет на модель DOM. На самом деле HTML-элемент влияет на DOM так, как будто он все еще виден. Теперь это может показаться странной особенностью, т. е. если вы не хотите, чтобы что-то было видимым, то почему вы хотите, чтобы это все еще влияло на DOM? Что ж, я могу без колебаний заявить, что я действительно попадал в ситуации, в которых такое поведение было именно тем, что мне было нужно.
Итак, просто помните, что, хотя это может показаться странным, visibility:hidden действительно предлагает особую ценность, когда вам это нужно.
С другой стороны, когда display:none применяется к элементу HTML, он не отображается на странице, и это тоже имеет смысл. Однако в этом случае элемент не оказывает никакого влияния на DOM, а что касается других элементов вокруг него, то он просто не существует. Это важная деталь, потому что с display:none вы эффективно удаляете элемент из DOM. Однако в то же время у вас есть полный доступ к этому элементу, и вы можете изменять его, стилизовать или даже изменять отображаемое значение, чтобы он снова отображался в DOM. Наиболее распространенные значения свойства отображения CSS: « блок », «встроенный» и « встроенный блок ».
См.
Pen CSS Visibility Hidden by Front End Video (@frontendvideo) на CodePen.
В примере №1 есть целая куча текста, а прямо посередине — изображение. Изображение имеет видимость : скрытый , установленный в его CSS. В итоге имеем пустую коробку. Это пустое поле представляет собой пространство, которое изображение занимает в DOM. Так что образ во многом еще существует. Но с визуальной точки зрения он был скрыт от глаз. Так что с visible:hidden , только имейте в виду: «он все еще там, но мы его не видим» .
И дело не только в том, что «он все еще там». это фактически влияет на DOM. Этот скрытый элемент буквально толкает другие элементы вверх и вниз, как если бы он был видимым. Так что, как вы понимаете, если вы не совсем понимаете, как работает visible:hidden, вы можете рвать на себе волосы, пытаясь понять, почему скрытый элемент все еще влияет на DOM. Просто имейте в виду: visibility:hidden не отменяет влияние этого элемента на другие элементы вокруг него.
Пример № 2 — display:none
См. «Видимость Pen CSS», скрытую внешним видео (@frontendvideo) на CodePen.В примере №2 все аналогично: есть целая куча текста, а прямо посередине — изображение. Изображение имеет display:none , установленное в его CSS. Но на этот раз пустого ящика нет. Это связано с тем, что элемент больше не влияет на DOM. Изображение все еще существует, но оно не только скрыто от глаз, оно больше не влияет на поток документов. Так что с display:none , только имейте в виду: «как будто совсем убрали со страницы» .
Но опять же, хотя элемент выглядит так, как будто он был удален из DOM, у вас все еще есть полный доступ к нему. Вы можете управлять этим элементом так же, как и любым другим. Единственная разница в том, что пока применяется display:none, будет казаться, что он больше не существует (как визуально, так и физически).