Скрыть все элементы, кроме одного div для просмотра печати - PullRequest
Новая
       5

Скрыть все элементы, кроме одного div для просмотра печати

32 голосов
/ 03 октября 2009

У меня есть следующий CSS для моего стиля печати: 

* {
 display:none;
}

#printableArea {
 display:block;
}

Я ожидал, что это скроет всех элементов и покажет только область printableArea, однако все будет скрыто. В режиме печати я получаю только пустую страницу.

Я правильно включил его в HEAD, с media="print" в этой конкретной таблице стилей.

Ответы [ 7 ]

28 голосов
/ 03 октября 2009

Если элемент не отображается, то ни один из его дочерних элементов не будет отображаться (независимо от того, какое свойство их отображения установлено).

* соответствует элементу <html>, поэтому весь документ скрыт.

Вы должны быть более разборчивы в том, что скрываете.

13 голосов
/ 03 февраля 2016

Вы придерживаетесь правильного общего подхода, но вы хотите использовать visibility: hidden вместо display: none, чтобы вы могли настроить дочерние элементы на видимость.

См. Печать

только?

8 голосов
/ 03 октября 2009 
html body * {
 display:none;
}

#printableArea {
 display:block;
}

Кроме того, вам может потребоваться! Важный для #printableArea, но, вероятно, нет.

4 голосов
/ 09 декабря 2015

Вы могли бы попытаться поднять это сверху всего. Это решило 90% моих проблем, тогда мне просто нужно было создать класс .noprint и добавить его к нескольким элементам. 

.print_area{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;

    background-color: #ffffff;
}
3 голосов
/ 18 января 2011

Если вы хотите использовать JavaScript, вы можете попробовать этот простой фрагмент, который даже не требует jQuery: 

document.body.innerHTML=document.getElementById('printableArea').innerHTML;
0 голосов
/ 20 апреля 2019

сделайте div-обертку после тега body. Перед обертыванием поместите div видимого элемента.

Мне пришлось сделать это, чтобы создать простую страницу с именем пользователя и паролем, и мне нужно было скрыть все, кроме фона полупрозрачной формы входа. Таким образом, после ввода правильных учетных данных форма будет анимирована, а полупрозрачная обложка страницы будет анимирована, и, наконец, появится ВСЕ в стороне, и вы сможете нормально использовать страницу.

0 голосов
/ 19 марта 2018

Существует однострочное решение:

С JQuery 

var selector = '';
$(document.head).append($('style').text('*{visibility:hidden}' + selector + '{visibility:visible}'));

Без JQuery 

var selector = '';
document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' });

В обоих примерах установите переменную selector на нужный вам селектор. Например, div#page:hover или p.class1,p.class2

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...