Скрытие всех элементов веб-страницы, кроме одного вложенного div - PullRequest
Новая
       0

Скрытие всех элементов веб-страницы, кроме одного вложенного div

11 голосов
/ 13 сентября 2011

Предположим, у моей веб-страницы есть такая страница: 

<body>
    <div id="fee">
        <div id="fi">

            <div id="actual_content">

                <p>Content</p>
                <div id="some_important_stuff">Blah</div>
                <p>More content</p>
                <span class="and_another_thing">Meh</span>

                ...
            </div>

            <div id="fo>
                ...
            </div>

            ...
        </div>

        <div id="fum">
            ...
        </div>

        ...
    </div>

    <div id="fazz">
        ...
    </div>

    ...
</body>

Я хочу создать стиль CSS для печати, который скрывает все, кроме содержимого actual_content .

Моя первая попытка была такой: 

body * {
    display: none; /* Hide everything first */
}

/* Show content div and all of its ancestors */

body > #fee {
    display: block;
}

body > #fee > #fi {
    display: block;
}

body > #fee > #fi > #actual_content {
    display: block;
}

/* Unhide contents of #actual_content */

#actual_content * {
    display: block; /* Not ideal */
}

Однако, поскольку нет «display: auto» или «display: default», я путаю стили элементов actual_content , когда пытаюсь их отобразить. Мне также не нравится жесткое кодирование пути к actual_content , поскольку он может измениться.

Ответы [ 4 ]

4 голосов
/ 18 февраля 2013

на верхнем уровне div установите visibility:hidden, затем на div вы хотите установить visibility:visible

4 голосов
/ 18 сентября 2011

Возможно, вы хотите использовать свойство visibility . W3Schools описывает разницу между свойствами отображения и видимости: свойство видимости влияет на видимость элемента, не затрагивая его структуру, то есть пространство, которое он обычно занимал бы на странице.

2 голосов
/ 18 ноября 2011

Вам нужно будет зайти и настроить таргетинг на все, что вы не хотите показывать по отдельности, установив display:none.Если вы можете изменить имена классов и т. Д., Вам следует удалить вложенные actual_content <div>, а затем добавить классы, подобные hide_div, к другим <div> s, чтобы их было легко отключить.

1 голос
/ 18 сентября 2011

Я знаю, что ваши теги показывают, что вы хотите решение CSS, но плагин PrintArea jQuery идеально подходит для ваших нужд:

PrintArea отправляет указанный элемент dom на принтер, поддерживая оригинальные стили CSS, применяемые к печатаемому элементу.

http://plugins.jquery.com/project/PrintArea

...