how can i add a css file to body of a page?_问答_开发者

how can i add a css file to body of a page?

开发者 https://www.devze.com 2023-02-25 15:17 出处：网络

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.

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.