Чем предполагаемое использование DOM `hidden` отличается от CSS-пропуска` visibility`?

Question

Существует свойство DOM hidden и свойство CSS visibility.Прочитав их описания, я не могу точно сказать, когда использовать какой.В чем состоит их предполагаемое использование?

Я понимаю, что они могут функционально (многие из) делать то же самое, но я говорю о намерениях.

Answer 1

Использование по назначению

Предполагаемое использование для hidden (а также явно, когда не для его использования) объясняется на странице, на которую вы ссылаетесь:

Глобальный атрибут hidden является атрибутом Boolean, указывающим, что элемент еще не является или более не является релевантным . Например, его можно использовать, чтобы скрыть элементы страницы, которые нельзя использовать, пока процесс входа в систему не будет завершен.

Атрибут hidden нельзя использовать для скрытия содержимого, которое может быть законно показано в другой презентации. Например, неправильно использовать скрытые, чтобы скрыть панели в диалоговом окне с вкладками, потому что интерфейс с вкладками - это просто вид переполнения презентации - с таким же успехом можно просто показать все элементы управления формой на одной большой странице с полосой прокрутки. Также неправильно использовать этот атрибут, чтобы скрыть содержимое только из одной презентации - если что-то помечено как скрытое, оно скрыто от всех презентаций, включая, например, программы чтения с экрана.

Обычный дисплей:

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
}

<div class="box">
  <div class="inner"></div>
</div>

[скрыт]

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
}

<div class="box">
  <div class="inner" hidden></div>
</div>

visibility: hidden;

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
  visibility: hidden;
}

<div class="box">
  <div class="inner"></div>
</div>

display: none;

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  display: none;
  height: 200px;
}

<div class="box">
  <div class="inner"></div>
</div>

Использование HTMLElement.prototype.hidden свойство:

document.querySelector('.inner').hidden = true;

.box {
  background-color: #f0f0f0;
  padding: 50px;
}

.inner {
  background-color: #ccc;
  height: 200px;
}

<div class="box">
  <div class="inner"></div>
</div>

Answer 2

Видимость CSS используется, чтобы скрыть элемент и выделяет место для скрытого элемента в макете документа . В отличие от DOM Hidden, который просто скрывает элемент от показа на странице, не выделяя место для данного элемента.

Возможно, вы ищете display: none?

В чем разница между видимостью: скрытой и отображаемой: нет?

Answer 3

Использование свойства видимости css со скрытым значением и скрытого атрибута html предназначено для скрытия элемента. Но между ними мало различий. Свойство видимости css со скрытым значением содержит его площадь, то есть высоту и ширину. Но скрытый атрибут не содержит свою область DOM. Здесь скрытый атрибут работает как свойство отображения css со значением none. Вам может быть понятно с помощью следующего примера:

<p style="visibility:hidden">Hello how are you?</p>
<p hidden>I am fine.</p>

Теперь просто проверьте ваш браузер и убедитесь, что оба они невидимы, но первый элемент абзаца по-прежнему содержит свою область.

Answer 4

Посмотрите, если вы используете пропеллер видимости. в css вы увидите в html «свободное» пространство, которое содержит ваш элемент css. Если вы используете DOM hidden, он просто удаляет этот элемент. Я объясняю это так.