是否可以根据条件在纯HTML中隐藏标签？

Question

我有一个条件。我要在其上显示该标签。在角度ngIf中。但是，在纯HTML中有任何属性吗？

我尝试过

隐藏

hidden =“ false”

hidden =“ true”

但是，没有任何作用。

Answer 1

仅使用纯CSS或原始JavaScript就有可能。如果您使用的是JS，则只需定位选择器，然后添加一个类或删除一个类以切换可见性

Answer 2

下面是使用hidden属性切换元素可见性的示例：

const toggle = document.querySelector('#toggle');
const content = document.querySelector('#content');

toggle.addEventListener('click', event => {
  content.toggleAttribute('hidden');
});

<button id="toggle">Toggle hidden attribute</button>
<div id="content" hidden>Some content with a hidden attribute.</div>

如果切换不是您的理想选择，则还可以使用setAttribute和removeAttribute函数。

Answer 3

纯HTML / CSS具有“显示”设置：

<div style="display:none">
<p>This graf will not appear.</p>
</div>

<div style="display:block">
<p>This graf will appear normally.</p>
</div>