我如何添加一個CSS文件到頁面的正文？

我在一個有打印視圖的頁面上工作，所以當用戶點擊「打印」時彈出一個新窗口，我想爲該窗口添加一個.css文件。我如何添加一個CSS文件到頁面的正文？

感謝

2011-04-12 Jay

難道你只是將該CSS文件包含在生成的預覽頁面的標題中嗎？沒有向我們展示任何代碼，你嘗試過什麼，或者甚至問我們一個問題 - 知道如何幫助你是不可能的。 – Dutchie432 2011-04-12 18:23:59

您的新窗口是在新窗口中打開的頁面上的單獨URL還是內容？ – 2011-04-12 18:24:35

我想這樣的事情$（文件）。就緒（函數（）{ \t \t $（」打印「）。點擊（函數（）{ \t \t \t \t $（」鏈接「）。ATTR（」 HREF」，「CSS/ecsPrint.css」）; \t \t \t返回假; \t \t \t \t}）; \t \t \t \t}）; – Jay 2011-04-12 18:25:19

$(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; 
    }); 
});

除非這是一個內部Web應用程序，我wouldnt推薦加載與JS的CSS。

來源

2011-04-12 18:32:34 Dementic

「除非這是一個企業網站」大聲笑。作爲除了外部人寫「企業」網站的人之外，我宣佈這個熱鬧，但對我的心臟不好。 – 2011-04-12 18:35:05

更適合你喜歡的亞當？ – Dementic 2011-04-12 18:37:19

無論環境如何，我都是網絡最佳實踐的支持者。我更喜歡「我不會推薦使用JS加載CSS。期間，它可能是不可靠和不清楚的。」 – 2011-04-12 18:43:55

當包括你的樣式表，使用：

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

來源

2011-04-12 18:23:53

這是您如何指定樣式表以僅在打印時應用。 – m4tt1mus 2011-04-12 18:25:09

我不認爲這是他問的...？他似乎想要將內容加載到新窗口中，然後將其視覺化地呈現給用戶。這不會在屏幕上顯示 - 僅在打印時才顯示。 – 2011-04-12 18:25:36

是的，他甚至沒有提出問題......我明白你的意思...... – 2011-04-12 18:32:00

您可以添加一個只打印樣式表

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

這個樣式並不需要被「添加」到彈出窗口。當用戶處於「正常」視圖時，它將被忽略，然後僅在用戶打印文檔時才應用。

如果您想同時顯示並應用於打印文檔，只需將其級聯即可。

<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

這樣你就能得到兩全其美的效果。根據需要使用print.css中的新規則覆蓋normal.css中的css規則，以根據需要製作文檔。新文檔在外觀上會有所不同，然後打印出不同的文檔。

來源

2011-04-12 18:24:54 rfadams

編輯：刪除由於澄清。新的答案：

打開新窗口的URL這樣：blah.aspx?print=true

然後在後端：

//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>

你也使用的一個顯示的jQuery方法也使用jQuery加載它。

來源

2011-04-12 18:31:03

實際上我正在加載打印視圖中的相同頁面，並根據css文件進行了一些更改。 – Jay 2011-04-12 18:32:47

在這種情況下，我建議使用URL查詢字符串參數，以便您的jQuery或後端代碼查看，然後將相應的CSS文件直接加載到頭部。 – 2011-04-12 18:37:25

我如何添加一個CSS文件到頁面的正文？

回答

相關問題