how can i add a css file to body of a page?
I am work开发者_StackOverflow中文版ing on a page which has a print view so when the user clicks on "Print" a new window pops up and I want to add a .css file just for that window.
Thanks
When including your stylesheet, use this:
<link rel="stylesheet" media="print" href="stylesheet.css" />
You can add a print only style sheet
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
This stylesheet does not need to be "added" to popup windows. It will be ignored when the user is in the "normal" view and then only applied when the user goes to print the document.
If you want to be both visible and apply to the printed document, just have it cascade.
<link rel="stylesheet" type="text/css" href="normal.css" /> #normal styling
<link rel="stylesheet" type="text/css" href="print.css" /> #override normal styling
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> #override normal, for printer
That way you get the best of both worlds. Override the css rules in normal.css with new rules in print.css, as needed to make the document look as you wish. The new document will visually look different and then also print out differently.
EDIT: Removed due to clarification. New answer:
Open the URL in a new window as such: blah.aspx?print=true
Then on your backend:
//Assuming you use .NET...
if(Request.Querystring("print").toLower() == "true" ) { //Convert to bool type if you are so inclined
printCSS.Visible = True;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="..." visible="false" runat="server" id="printCSS" />
</head>
You could also use one of the jQuery methods shown to load it in using jQuery too.
$(document).ready(function () {
$(".print").click(function () {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "css/ecsPrint.css"
});
return false;
});
});
Unless this is a Internal Web Application, i wouldnt recommend loading css with JS.
加载中,请稍侯......
精彩评论