Question

如果我想隐藏除<div id="content">内的所有元素（包括 div#content本身），我可以使用以下CSS ：

*
{
    visibility: hidden !important;
}

div#content, div#content *
{
    visibility: visible !important;
}

关于此解决方案需要注意的一点是，隐藏的元素仍占用空间。不幸的是，并非所有元素都具有相同的display属性，因此您不能简单地将上面的visibility替换为display。

使用JavaScript，如何将<div id="#content">'系列'中不的所有元素设置为display: none？

Answer 1

用于更改最少对象上的样式的通用解决方案，但要确保#content及其所有子元素都可见需要算法从#content遍历并且隐藏每个级别的所有兄弟姐妹，而不隐藏#content的祖先。因为这从#content开始向上，所以它永远不会隐藏#content内的任何元素。

function hideAllExcept(id) {
    var el = document.getElementById(id);
    while (el && el != document.body) {
        // go one level up
        var parent = el.parentNode;
        // get siblings of our ancesotr
        var siblings = parent.childNodes;
        // loop through the siblings of our ancestor, but skip out actual ancestor
        for (var i = 0, len = siblings.length; i < len; i++) {
            if (siblings[i] != el && siblings[i].nodeType == 1) {
                // only operate on element nodes
                siblings[i].style.display = "none";
            }
        }
        el = parent;
    }
}

hideAllExcept("content");

警告：第一个版本不会隐藏作为#content祖先兄弟节点的文本节点（#content之外的所有其他文本节点都被隐藏，因为它们的父节点是隐藏的）。要隐藏这些文本节点，它们必须包含在<span>标记中，以便可以在<span>标记上设置样式，但我不知道OP是否需要该级别复杂性或希望文本节点以这种方式包装。

为了完整性，这里有一个版本，它将包装父兄弟文本节点，因此它们也可以设置为display: none。根据源HTML：

，可能需要也可能不需要

function hideAllExcept(id) {
    var el = document.getElementById(id);
    while (el && el != document.body) {
        // go one level up
        var parent = el.parentNode;
        // get siblings of our ancesotr
        var siblings = parent.childNodes;
        // loop through the siblings of our ancestor, but skip out actual ancestor
        for (var i = 0, len = siblings.length; i < len; i++) {
            var node = siblings[i];
            if (node != el) {
                if (node.nodeType == 1) {
                    // only operate on element nodes
                    node.style.display = "none";
                } else if (node.nodeType == 3) {
                    // wrap text node in span object so we can hide it
                    var span = document.createElement("span");
                    span.style.display = "none";
                    span.className = "xwrap";
                    node.parentNode.insertBefore(span, node);
                    // Be wary of the dynamic siblings nodeList changing 
                    // when we add nodes.  
                    // It actually works here because we add one 
                    // and remove one so the nodeList stays constant.
                    span.appendChild(node);
                }
            }
        }
        el = parent;
    }
}

hideAllExcept("content");

一个有效的演示：http://jsfiddle.net/jfriend00/yVWDx/

Answer 2

试试这个

var al = document.body.getElementsByTagName("*");

for(var i =0;i<al.length;i++)
{
    var elm = al[i];
    if(elm.parentNode.id != 'content') {
        elm.style.display = 'none';
    }
}

除了特定元素之外，递归设置`display：none`

2 个答案: