Użyj CSS, aby ukryć zawartość na wydruku

Szukam łatwego sposobu na ukrycie wszystkiego oprócz określonego elementu div i jego zawartości.Użyj CSS, aby ukryć zawartość na wydruku

<html> 
    <head></head> 
    <body> 
    <div class="header">...</div> 
    <div class="menu">...</div> 
    <div class="content">...</div> 
    <div class="footer">...</div> 
    </body>. 
</html>

Tak więc, na przykład, jeśli chcę wydrukować tylko div.content, chciałbym zrobić to tak:

.header, .menu, .footer { 
    display: none; 
}

A jeśli układ jest skomplikowany, staje się bałagan. Czy jest to łatwiejszy sposób na CSS?

Źródło

2011-01-27 Dziamid

Możesz wydrukować tylko div, który chcesz, postępując zgodnie z artykułu! http://stackoverflow.com/questions/2255291/print-the-contents-of-a-iv – BillDo168

zrobiłem to CSS3 sposób: za pomocą nie pseudo klasy i bezpośrednich przodków (dzieci)

/* hide all children of body that are not #container */ 
body > *:not(#container) { 
    display: none; 
} 
/* hide all children of #container that are not #content */ 
#container > *:not(#content) { 
    display: none; 
} 
/* and so on, until you reach a div that you want to print */ 
#content > *:not(#print_me) { 
    display: none; 
}

w ten sposób można wyeliminować wszystko, z wyjątkiem tego, co chcesz wydrukować nawet w bardzo skomplikowanych układów. : nie jest tu bardzo wydajny, ponieważ dba o wszelkie przyszłe modyfikacje twojego html.

Źródło

2011-02-17 00:04:27 Dziamid

@media print { 
.noPrint { 
    display:none; 
    } 
}

Teraz trzeba zastosować klasę noPrint do elementów, które chcesz ukryć się w druku.

Dobrą praktyką jest stosowanie arkusza stylów specjalnie do drukowania, a i ustaw jego atrybut media print.

Przykład:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Źródło

2011-01-27 13:33:09 Sarfraz

Pamiętaj, aby dodać sekcję drukowania po określeniu wszystkich pozostałych sekcji stylu. W ten sposób instrukcje drukowania zastąpią inne style w czasie drukowania. – Mike

pytanie: "szukanie prostego sposobu na ukrycie wszystkiego poza pewnym div" – Pooya

To powinna być zaakceptowana odpowiedź. Jest to najbardziej elastyczny ze wszystkich innych odpowiedzi i nie wymaga użycia JS lub użycia wtyczki JS do ręcznego pokazywania i ukrywania elementów. – TinkerTenorSoftwareGuy

przypisać oddzielny plik CSS, który definiuje zachowanie podczas drukowania strony internetowej.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

a następnie w ciągu tego pliku wystarczy zdefiniować:

.header, .menu, .footer { display: none; }

Źródło

2011-01-27 13:33:54 Tr1stan

Można użyć klas.

.classHide{display: none}

zależności od języka, którego używasz, gdy jeśli == true można dodać klasę do nagłówka, menu i stopkę.

Nie musisz więc używać innego pliku css.

Źródło

2011-01-27 13:40:40 Thiago

W jaki sposób zamierzasz je ukryć tylko podczas drukowania za pomocą czegokolwiek oprócz CSS? – BoltClock

Czy używasz tylko html + css? – Thiago

Chodzi mi o to, że nie można używać języka po stronie serwera, aby powiedzieć style tylko do zastosowania podczas drukowania. Dzieje się tak dlatego, że drukowanie odbywa się po stronie klienta, więc serwer nic nie będzie wiedział. – BoltClock

zależności od struktury HTML (i przeglądarek trzeba wspierać, ponieważ IE6 nie obsługuje tego), można ukryć wszystkie DIV na najwyższym poziomie i po prostu pokazać jeden/kilka chcesz pokazać:

body > div { 
    display: none; 
} 

#content { 
    display: block; 
}

Źródło

2011-01-27 14:03:05 RoToRa

Użyj CSS, aby ukryć zawartość na wydruku

Odpowiedz

Powiązane problemy