javascript - 动态隐藏列表中的元素，隐藏元素不占用页面空白空间

Question

我需要根据用户的操作隐藏元素。如果他按“a only”，我可以说类似

for(i=0;i<document.getElementsByClassName("b").length;i++){
      document.getElementsByClassName("b")[i].style.visibility="hidden";
 }

但这会在列表中的元素之间留下空白空间（不可见的元素仍然占据空间），看起来很糟糕，有没有更好的方法可以做到这一点。

score 4 · Accepted Answer

试试 style.display="none"

使用 visibilty="hidden"，元素仍将占用页面上的计算空间。

你也可以考虑使用jQuery。它使这些任务变得异常简单。

score 2 · Accepted Answer

是的。您将visibilityCSS 属性设置为hidden. 这会阻止元素显示，但它仍会占用空间。

您想将display属性设置为none. 这会将其从显示中移除，并停止它占用空间 - 有效地将其从文档中移除，至少就显示它而言。

for(i=0;i<document.getElementsByClassName("b").length;i++){
    document.getElementsByClassName("b")[i].style.display = "none";
}

score 1 · Accepted Answer

使用display: none而不是visiblity: hidden. 该visibility属性只隐藏元素；该display属性实际上从布局中删除了元素。

score 0 · Accepted Answer

对于visibility:hidden，javascript解析器将解析元素css属性并隐藏，它实际上存在于dom上，但用户看不到。对于 display: none，当 javascript 解析器找到具有显示的元素时，它只是忽略该元素并继续前进。所以你必须用户 display: none;

4 回答 4