纯HTML中能否基于条件控制标签的显示与隐藏？

嘿，我完全懂你的困惑！Angular的*ngIf用起来太顺手了，但纯HTML里确实没有直接等价的原生属性——不过别担心，我们有几种办法解决这个问题，先从你遇到的hidden属性失效问题说起：

为什么hidden属性没生效？ #

HTML里的hidden是布尔属性，它的逻辑很简单：只要这个属性存在，元素就会被隐藏，不管你给它设的值是"true"还是"false"！比如：

<!-- 这两个都会隐藏元素 -->
<div hidden="true">我会被隐藏</div>
<div hidden="false">我也会被隐藏</div>

另外，如果你的元素被其他CSS规则覆盖了display属性（比如自定义了display: block !important），hidden的默认样式（display: none）也会失效。

纯HTML下的替代方案 #

1. 用自定义数据属性+CSS（模拟隐藏/显示） #

如果不需要从DOM中移除元素，只是控制显示状态，可以自定义一个数据属性，结合CSS来实现：

<style>
  /* 当data-show为false时隐藏元素 */
  [data-show="false"] {
    display: none;
  }
</style>

<!-- 显示元素 -->
<div data-show="true">我会显示出来</div>
<!-- 隐藏元素 -->
<div data-show="false">我会被隐藏</div>

这个方案和*ngIf的区别是：元素依然存在于DOM中，只是视觉上隐藏；而*ngIf会直接把元素从DOM里添加/移除。

2. 用JavaScript实现真正的DOM添加/移除（接近*ngIf效果） #

如果需要像*ngIf那样彻底添加/移除元素，纯HTML做不到，得借助一点点JavaScript：

<script>
  // 假设我们有一个条件变量
  const shouldShow = true;
  
  const targetElement = document.getElementById('my-element');
  if (shouldShow) {
    // 如果条件为真，添加元素到DOM
    document.body.appendChild(targetElement);
  } else {
    // 如果条件为假，移除元素
    targetElement.remove();
  }
</script>

<!-- 初始可以把元素放在DOM外或者隐藏 -->
<div id="my-element" style="display: none;">我会根据条件被添加/移除</div>

或者更灵活一点，直接控制元素的display属性来模拟：

document.getElementById('my-element').style.display = shouldShow ? 'block' : 'none';

总结 #

• 纯HTML没有原生的“条件添加/移除元素”属性，hidden的逻辑和你预期的不一样；
• 简单的显示/隐藏可以用自定义属性+CSS；
• 要接近*ngIf的DOM操作效果，必须用JavaScript辅助。

内容的提问来源于stack exchange，提问作者Satish Patro