Question

我有一些简单的html代码，如下所示：

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

如您所见，已包含隐藏标签并将其设置为false。不是字符串'false'，而是布尔值false。然而，当运行div时，它仍然仍然是完全隐藏的，当我检查CSS代码以了解为什么它显示了hidden标记的作用时： display: none !important;但是hidden设置为错误的权利不应该是这种情况吗？

Answer 1

因为隐藏不需要值：它要么是隐藏的，要么不是。您发送的布尔值将被忽略。因此，基本上只在应隐藏的情况下才添加隐藏，而在应显示的情况下不添加任何内容。参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

Answer 2

HTML中的hidden属性是不能设置为任何值的属性。

有关语法的更多信息，请访问MDN docs。

Answer 3

使用hidden代替[style.display]="hideElement?'none':'inherit'"

在.ts中的位置，您将设置hideElement是true还是false;

或者创建一个类.display-hide{ display:none;}，然后使用

进行切换

[class.display-hide]="hideElement"

hidden全局属性是一个布尔型属性，指示该元素尚未或不再相关。例如，它可以用于隐藏在登录过程完成之前无法使用的页面元素。浏览器不会渲染具有隐藏属性集的元素。

我使用了这个link for reference：

Answer 4

仅在hidden上使用属性绑定

[hidden]=" some expression"

具有hidden = false的div仍然是隐藏的

4 个答案: