动态隐藏列表中的元素，而隐藏元素占用页面上的空白区域

Question

我需要根据用户的行为隐藏元素。如果他按下“只有”，我可以说像

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

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

Answer 1

尝试style.display =“none”

使用visibilty =“hidden”，元素仍会占用页面上的计算空间。

您也可以考虑使用jquery。它使这些任务非常简单。

Answer 2

是的。您正在将visibility CSS属性设置为hidden。这会阻止元素显示，但仍会占用空间。

您希望将display属性设置为none。这样就不会显示它，和会阻止它占用空间 - 有效地将其从文档中删除，至少就显示它而言。

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

Answer 3

使用display: none代替visiblity: hidden。 visibility属性仅隐藏元素; display属性实际上从布局中删除了元素。

Answer 4

对于可见性：隐藏，javascript解析器将解析css属性和隐藏的元素，它实际上存在于dom，但用户无法看到。 对于display：none，当javascript解析器找到带有显示的元素时，它只是忽略该元素并向前移动。所以你必须用户display：none;