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