1

（それ自体を含む）内の要素を除くすべての要素を非表示にしたい場合は、次のCSSを使用できます。<div id="content"> div#content

*
{
    visibility: hidden !important;
}

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

このソリューションについて注意すべきことの1つは、非表示の要素が依然としてスペースを占めることです。残念ながら、すべての要素が同じ属性を持っているわけではないため、上記をdisplay単純に。に置き換えることはできません。visibilitydisplay

JavaScriptを使用して、 「ファミリ」内にないすべての要素をに設定するにはどうすればよいですか？<div id="#content">display: none

4

2 に答える 2

8

最小のオブジェクトのスタイルを変更する汎用ソリューションですが、その#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/

于 2012-04-18T21:56:31.613 に答える
-1

これを試して

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';
    }
}
于 2012-04-18T21:41:08.847 に答える