div со скрытым = false все еще скрыто

Question

У меня есть простой HTML-код, как показано здесь:

<div class="container card" hidden=false>
    <canvas id="myChart"></canvas>
</div>

Как видите, скрытый тег включен и имеет значение false. Не строка «ложь», просто логическое значение «ложь». Тем не менее, при запуске div все еще полностью скрыт, и когда я проверяю код CSS, почему он показывает, что скрытый тег дает его: display: none !important; Но это не должно быть в случае, если для hidden установлено значение false, верно?

Answer 1

Поскольку значение hidden не нуждается в значении: оно либо скрыто, либо нет. Логическое значение, которое вы отправляете, игнорируется. Таким образом, в основном добавьте скрытый, только если он должен быть скрыт, и ничего не добавьте, если он должен показать. ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

Answer 2

просто используйте привязку свойства к hidden

[hidden]=" some expression"

Answer 3

Вместо hidden используйте [style.display]="hideElement?'none':'inherit'"

Где в .ts вы бы указали, будет ли hideElement true или false;

Либо создайте класс .display-hide{ display:none;}, а затем переключите его с помощью

[class.display-hide]="hideElement"

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

Я использовал эту ссылку для справки :

Answer 4

Атрибут hidden в HTML - это атрибут, для которого нельзя установить любое значение.

Для получения дополнительной информации о синтаксисе посетите Документы MDN .