Я использую visibility:hidden, чтобы скрыть некоторые элементы, но они все еще занимают место на странице, пока они скрыты.
Как я могу заставить их полностью исчезать визуально, как будто они вообще не находятся в DOM (но не удаляют их вообще из DOM)?
Попробуйте установить display:none, чтобы скрыть и установить display:block для отображения.
используйте стиль вместо
<div style="display:none;"></div>
Использовать display:none является хорошим вариантом только для удаления элемента, но он будет также удален для прокрутчиков. Есть также дискуссии, если это влияет на SEO. Там хорошая, короткая статья по этой теме в A List Apart
Если вы действительно просто хотите скрыть и не удалять элемент, лучше используйте:
div {
position: absolute;
left: -999em;
}
Подобным образом он также может читаться программами чтения с экрана.
Единственным недостатком этого метода является то, что этот DIV фактически отображается, и он может влиять на производительность, особенно на мобильные телефоны.
Посмотрите вместо visibility: hidden; используйте display: none;. Первый параметр будет скрыт, но еще занимает пробел, а второй параметр будет скрыт, а не не займет пробел.
display:none, чтобы скрыть и установить display:block для отображения.
здесь другой подход к возврату их после отображения: none. не используйте display: block/inline и т.д. Вместо этого (при использовании javascript) установите для свойства свойства css значение '' (т.е. пустое)
Ответ на этот вопрос говорит о том, чтобы использовать display: none и display: block, но это не помогает кому-то, кто пытается использовать css-переходы, чтобы показывать и скрывать контент, используя свойство видимости.
Это также сбило меня с ума, потому что использование дисплея убивает любые css-переходы.
Одно из решений - добавить это к классу, который использует видимость:
overflow:hidden
Для этого работа зависит от компоновки, но она должна содержать пустой контент в пределах div, в котором он находится.
display: none - это решение, которое полностью скрывает элементы с его пространством.
display:none и visibility: hidden visibility:hidden означает, что тег не отображается, но для него выделяется пространство на странице.
display:none означает, что он полностью скрывает элементы с его пространством. (хотя вы все еще можете взаимодействовать с ним через DOM)
$('#abc').css({"display":"none"});
это скрывает содержимое, а также не оставляет пустое пространство.
над моим знанием можно в 4-х направлениях
<button style="display:none;"></button>#buttonId{ display:none; }$('#buttonId').prop('display':'none'); и $("#buttonId").css('opacity', 0);display: none - лучшая вещь, чтобы избежать пробела на странице