JavaScript复选框控制列表显示：display=''与'none'的区别及疑问

嘿，我来帮你把这两个容易搞混的点理得明明白白，结合你写的列表代码来解释更清楚～

你混淆的应该是JavaScript里的null和CSS里的none，这俩完全是不同领域的东西：

• JS里的null：它是JavaScript的原始数据类型之一，表示「主动设置的空值」——意思是你明确告诉程序“这个变量/属性没有任何有效内容”。比如let emptyValue = null，就是主动给变量赋值为空。在你的DOM操作里，元素的style.display如果没被设置过，它的初始值不是null，而是空字符串""，或者用getComputedStyle能拿到浏览器计算后的默认值（比如li的默认是list-item）。
• CSS里的none：这是CSS属性的一个取值，专门用来控制元素的显示状态——display: none会让元素彻底隐藏，而且不占据任何页面空间，就像它从没存在过一样。你代码里初始化li的时候写style='display:none'，用的就是这个CSS值。

这俩是控制元素显示隐藏的核心操作，差异很明显：

• display='none'：明确给元素的行内样式设置display: none，元素会立刻隐藏，并且完全不占用页面布局空间。你代码里一开始给所有li-men类的列表项加这个样式，就是让男性列表默认处于隐藏状态。
• display=' '（空字符串）：这个操作是把元素行内样式里的display属性清空。清空之后，元素会回到它的浏览器默认显示状态——比如li元素的默认display是list-item，所以清空后它会以列表项的正常方式显示出来，占据应有的页面空间。
  补充一句：有时候你可能会看到有人用display='block'来显示元素，但display=''更稳妥，因为它会遵循元素本身的默认display类型（比如span默认是inline，硬设block会改变布局）。

举个你代码里的场景：当复选框状态改变时，你可以通过循环给li-men类的元素切换这两个值——勾选时设为空字符串显示列表，取消勾选时设为none隐藏列表，完美实现筛选效果～

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