如何在JavaScript上链接CSS文件
[英]How to link css file on javascript
问题描述
I want to link css file on printing specific div but it dose not get stylesheet on printing area. 
我想在打印特定的div上链接css文件，但在打印区域上无法获取样式表。 How can i fix this. 我怎样才能解决这个问题。 Here is my source code: 这是我的源代码：
function print_area(){ 函数print_area（）{
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>');
win.document.write($("#article_main_wrapper").html());
win.document.write('</body></html>');
win.print();
win.close();
}
3 个解决方案
解决方案1
0 2017-05-12 19:15:13
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
var html = '<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="css/thinking_aloud_test - Copy.css" media="print"></head><body>';
html += $("#article_main_wrapper").html();
html += '</body></html>';
win.print();
win.close();
win.document.write(html); // You need to append the `html` in a single element
// Write it at once to a single win.document.write
解决方案2
0 2017-05-12 19:25:51
Here is an example of injecting css via javascript. 这是通过javascript注入CSS的示例。
(function(d, s, id) { var css, icss = d.getElementsByTagName(s)[0] || d.getElementsByTagName('head')[0]; if (d.getElementById(id)) { return; } css = d.createElement(s); css.id = id; css.href = "http://getbootstrap.com/dist/css/bootstrap.min.css"; css.rel = "stylesheet"; }(document, 'link', 'bootstrap'));
<html> <head> </head> <body> <button class="btn btn-success">normal button to bootstrap button by adding css</button> </body> </html>
if it's for printing with a new tab where you want to append content with css and then print, just go with there steps 如果要使用新选项卡进行打印，并且要在其中添加CSS内容然后进行打印，则只需执行以下步骤
var content = document.createTextNode("Some HTML content you want to print");
var css = document.createElement('link');
css.rel = 'stylesheet';
css.type = 'text/css';
css.href = 'css url';
css.media = 'all';
printwindow.focus(); // if its a new tab where you want to do print operation, assuming printwindow is your new tab/popup opened by window.open()
printwindow.document.head.appendChild(css);
printwindow.document.body.appendChild(content);
printwindow.print();
printwindow.document.close();
解决方案3
0 2017-05-12 19:37:44
Another possibility is to read the content of the stylesheet and write it directly into the HTML. 另一种可能性是读取样式表的内容并将其直接写入HTML。 Here an example using jQuery: 这是一个使用jQuery的示例：
function print_area(){
var win = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
$.get('main.css', function (data) {
console.log(data);
win.document.write('<html><head><title>my div</title><style>');
win.document.write(data);
win.document.write('</style></head><body >');
win.document.write('<div id="article_main_wrapper">My DIV</div>');
win.document.write('</body></html>');
win.print();
win.close();
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.