Preventing a div and its content from being printed
I have a print page, and I want to put a div with some instructions on how to print the page in it. I don't want this section to appear when they actually print the page.
How would I achieve this using CSS or Jav开发者_如何学PythonaScript?
A common method is to use a separate CSS for printing. You can have a css for all media and one for print:
<link rel="stylesheet"
type="text/css"
media="print" href="print.css" />
In the print.css just put the display:none on the div.
Davide
Since it hasn't been stated here before, you don't necessarily need to have an external style sheet:
<style type="text/css" media="print">
.hideMeInPrint { display: none; }
</style>
The simplest solution is to add this in the main CSS file. Do note that, when you link the CSS file, you should not specify the media attribute (<link type="text/css" rel="stylesheet" href="/path/to/css.css" />
):
@media print {
div.classname {
display:none;
}
}
You are looking for @media print.
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Bit more info on Print Style Sheets
Insert a stylesheet just for print:
<link rel="stylesheet" href="/path/print.css" media="print" />
Then put css to hide the div in that stylesheet
<link type="text/css" rel="stylesheet" media="print" href="/css/print.css" />
in this css file style put display: none; for elements you don't want to be printed
In your html, indicate a stylesheet used for printing:
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>
And in this CSS:
#mydiv {display: none;}
You can include a stylesheet that is only applied when printing.
<LINK REL="stylesheet" TYPE="text/css" MEDIA="print" HREF="print-specific-styles.css">
In that style sheet, you can hide your divs and make any other necessary changes.
Anyone working with div's inside php then take Divya's recommend. I spent hours on this until ran across this, put into external and all class in other code with php page, works great :) Also, works good with bootstraps whereas bootstrap can otherwise be ignored and still print.
@media print {
div.classname {
display:none;
}
}
精彩评论