Question

我有以下代码行

document.getElementById("divName").style.display = "none";

如何在不编写常用代码行的情况下，使用完全不同的名称一次隐藏一堆图层？

由于

Answer 1

Felix's thoughts很好。还有第三种方式：由于它们都共享一个共同的祖先（body），你可以通过向body添加一个类并在CSS中使用与所讨论的实际元素匹配的规则来隐藏它们，就像这样：

body.foo table {
    display: none;
}

如果您将“foo”类添加到body，这会隐藏页面上的每个表格，如下所示：

document.body.className += " foo";

...然后如果你删除它再显示表格：

document.body.className =
    document.body.className.replace(/\bfoo\b/, '');

Live example

当然，选择器可以更具挑剔性：

body.foo div.magic > table {
    display: none;
}

这样只会隐藏table的{{1}}元素，而div类具有“魔力”类（并且仅当body具有“foo”类时才会隐藏。

偏离主题：如果上述方法不合适（并且不适合很多情况），那么JavaScript库就像jQuery，Prototype， YUI，Closure或any of several others可以使操作元素集（以Felix提到的方式）比单独操作更容易。

Answer 2

选项1 - 创建函数

function hideDiv(divname) {
    document.getElementById(divname).style.display = "none";
}

选项2 - 隐藏父元素

如果所有元素都可以放在父元素中或者已经存在，则可以简单地隐藏该元素。

选项3 - 使用框架

像jQuery或MooTools这样的javascript框架将有一个方便的编码约定，例如.hide()

jQuery： - 请参阅http://api.jquery.com/hide/

mooTools - 请参阅http://mootools.net/docs/more/Element/Element.Shortcuts

此外，框架具有适用于更复杂情况的工具，并允许您选择元素或特定类的子元素并迭代它们。在处理具有动态创建内容的页面时，它们可以非常方便。

`


// jQuery Example 1: class-hiding
$(".elementsToHide").hide()

// jQuery Example 2: hiding divs within element "#whatever"
$("div", "#whatever").each(function() {
   $(this).hide();
});

Answer 3

如果他们都有相同的父/祖先，请隐藏父母（如果可能）。
获取对这些元素的引用，将它们放入一个数组中并循环遍历它们。

Answer 4

var divsToHide = ["thisDiv", "thatDiv", "divName"];
for (var i=0; i<divsToHide.length; ++i)
{
    var div = document.getElementById(divsToHide[i]);
    if (div) div.style.display = "none";
}

或者，您可以使用像jQuery这样的框架，并为隐藏的div提供一些共同的属性，就像一个“隐藏”类。然后，

$(".hidden").hide();

当然，在这种情况下，您也可以通过CSS在课堂上设置display: none。

Answer 5

如果它们来自同一个类，您可以选择该类的所有元素并循环遍历它们。如果他们都是同一个父母，你可以选择所有孩子，循环遍历，必要时过滤并以这种方式隐藏。

Answer 6

var names = ['divName1', 'divName2','divName3'];
for ( i in names ) document.getElementById(names[i]).style.display = "none";

隐藏div的快速方法？

6 个答案:

选项1 - 创建函数

选项2 - 隐藏父元素

选项3 - 使用框架