Я использую, visibility:hiddenчтобы скрыть определенные элементы, но они все еще занимают место на странице, пока скрыты.
Как я могу заставить их полностью исчезнуть визуально, как будто их нет в DOM вообще (но фактически не удаляя их из DOM)?
228
offsetTop, и яdisplay:noneдолжен был установитьoffsetTopзначение 0. Мое решение здесь состояло в том, чтобы использоватьvisibility: hiddenзатем установить ширину и высоту на 0. Как только мне нужно было сделать элемент видимым снова, я удалил три атрибута, используя Javascript. Немного хакерское решение, но оно хорошо работает почти во всех случаях использования.Ответы:
Попробуйте установить,
display:noneчтобы скрыть и установить,display:blockчтобы показать.источник
display: block, некоторые должны быть установленыdisplay: inline(например,<span>или<a>или<img>элементы DOM).hiddenс именемdisplay: none. Добавьте класс к элементу, чтобы скрыть его, удалить его показать. При удалении егоdisplayсвойство восстанавливается до элемента по умолчанию.вместо этого используйте стиль
источник
Использовать
display:noneэто хороший вариант, просто удалить элемент, НО он также будет удален для программ чтения с экрана . Есть также обсуждения, если это влияет на SEO. Есть хорошая, короткая статья на эту тему в A List ApartЕсли вы действительно хотите скрыть, а не удалить элемент, лучше используйте:
Таким образом, это может быть также прочитано программами чтения с экрана.
Единственным недостатком этого метода является то, что этот DIV фактически отображается, и это может повлиять на производительность , особенно на мобильных телефонах.
источник
visibility: hidden;, допустим, у вас есть другие абсолютные элементы, у которых не будет конфликта для пространства, только конфликтz-index. Просто чтобы скрыть элемент, с которым я бы пошелvisibilityСмотри, вместо того, чтобы
visibility: hidden;использоватьdisplay: none;. Первый вариант будет скрыт, но по- прежнему занимает место, а второй параметр будет скрыт и не займет никакого места.источник
Ответ на этот вопрос гласит: использовать display: none и display: block, но это не помогает тем, кто пытается использовать CSS-переходы для отображения и скрытия содержимого с помощью свойства видимости.
Это также сводило меня с ума, потому что использование дисплея убивает любые CSS-переходы.
Одним из решений является добавление этого в класс, который использует видимость:
Чтобы это работало, это зависит от макета, но оно должно содержать пустой контент внутри div, в котором он находится.
источник
Рассказ о
display:noneиvisibility: hiddenvisibility:hiddenозначает, что тег не виден, но для него выделено место на странице.display:noneзначит полностью скрывает элементы со своим пространством. (хотя вы все равно можете взаимодействовать с ним через DOM)источник
Переключение
displayне допускает плавных переходов CSS. Вместо этого переключите и thevisibilityи themax-height.источник
transform: translateX(-100%). Мы не хотимdisplay: nonedisplay:noneспрятаться и установить,display:blockчтобы показать.источник
as though they are not in the DOM at all (but without actually removing them from the DOM)visibility: hiddenтолько останавливает отображение содержимого, но по-прежнему использует вертикальное / горизонтальное пространство, display: none удаляет вертикальное / горизонтальное пространство для элемента.Вот другой способ вернуть их после отображения: нет. не используйте display: block / inline и т. д. Вместо этого (если используется javascript) установите для свойства css display значение '' (т. е. пустое)
источник
это скрывает содержимое, а также не оставляет пустого пространства.
источник
выше моих знаний это возможно 4 способами
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none');&$("#buttonId").css('opacity', 0);источник
дисплей: ни одна из них не является наилучшей, чтобы избежать пробелов на странице
источник
Используйте,
!importantесли вы вынуждены переопределить существующие стили CSS.источник