如何切换行内/块级元素显示状态且不丢失原始display属性

下面分享几个简洁的实现方法，完美解决<a>、<span>这类行内元素切换显示时不会被改成block的问题：

方法一：CSS类切换（最简洁） #

核心思路是用专门的隐藏类控制元素隐藏，移除类后元素自动恢复原有display属性。

CSS代码 #

.hidden {
  display: none !important;
}

JS控制逻辑 #

• 隐藏元素：

document.getElementById('your-element').classList.add('hidden');

• 显示元素：

document.getElementById('your-element').classList.remove('hidden');

这个方法完全不用手动记录元素的原始display值，移除类后元素的原有样式（浏览器默认样式、自定义类样式、内联样式）都会自动生效，适配所有元素类型。

方法二：存储原始display值后恢复 #

如果不想用CSS类，也可以通过JS提前存储元素的原始display属性，之后恢复时调用：

JS代码 #

• 隐藏元素时存储原始值：

const elem = document.getElementById('your-element');
// 优先取内联样式的display，没有则取计算后的实际生效值
elem.dataset.originalDisplay = elem.style.display || getComputedStyle(elem).display;
elem.style.display = 'none';

• 显示元素时恢复：

elem.style.display = elem.dataset.originalDisplay;

getComputedStyle会获取元素最终生效的display值，哪怕这个值来自继承或浏览器默认样式，能确保恢复的准确性。

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