在使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来，在网上找了好多资料，整理一下分享给大家

一、先看看css的引用文件方式

1、直接在内部的元素中使用”style”属性来定义样式，比如：

2、在

元素中使用”style”元素来指定

3、使用元素链接到外部的样式文件，比如：

这三种是比较常见的方式

二、第一种方式：

直接在内部的元素中使用”style”属性来定义样式，然后调用printArea()函数，可打印全屏，可打印局部，样式都是起作用的，代码如下：

index

$("#btnPrint").click(function () {

$("#printArea").printArea();

});

$("#btnPrintFull").click(function () {

$("body").printArea();

});

第二种方式：

在

元素中使用”style”元素来指定，你会发现打印局部网页预览的时候，样式并不起作用，在网上找到得资料是，在

但是你会发现，这样做之后，样式并不起效，不知道是我用错了还是什么，贴上代码

index

.content{font-size:36px;color:#ff0000;}

$("#btnPrint").click(function () {

$("#printArea").printArea();

});

$("#btnPrintFull").click(function () {

$("body").printArea();

});

后来弄了好久，才摸索出了解决办法，直接贴上代码

index

$("#btnPrint").click(function () {

$("#printArea").printArea();

});

$("#btnPrintFull").click(function () {

$("body").printArea();

});

把你要打印那块区域的样式放到你要打印的那块区域里面，打印的时候样式就有效了，不需要加media="print"

第三种方式和第二种方式是一样的道理