Javascript 打印时保留内联CSS

Javascript 打印时保留内联CSS,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用print.css文件格式化页面以进行打印。我的布局很好,但是有些颜色有问题 我有一个表格,表格中的单元格根据单元格中数字的值以特定的颜色背景进行格式化。这是通过javascript完成的,javascript在表加载完值后执行(使用datatables.js) 像这样: function colorIndex(data) { $(".index_num").each(function() { var x = $(this).text(); if (x <= 25

我正在使用print.css文件格式化页面以进行打印。我的布局很好,但是有些颜色有问题

我有一个表格,表格中的单元格根据单元格中数字的值以特定的颜色背景进行格式化。这是通过javascript完成的,javascript在表加载完值后执行(使用datatables.js)

像这样:

function colorIndex(data) {
$(".index_num").each(function() {
    var x = $(this).text();
    if (x <= 25) {
        $(this).css("color", "white")
        $(this).css("background-color", "#1d5792")
    } else if ((x > 25) && (x <= 50)) {
        $(this).css("color", "white")
        $(this).css("background-color", "#2e7fb5")
    } else if ((x > 50) && (x <= 80)) {
        $(this).css("color", "black")
        $(this).css("background-color", "#6db5d8")
    } else if ((x > 80) && (x <= 115)) {
        $(this).css("color", "black")
        $(this).css("background-color", "#cacaca")
    } else if ((x > 115) && (x <= 140)) {
        $(this).css("color", "black")
        $(this).css("background-color", "#fd9245")
    } else if ((x > 140) && (x <= 165)) {
        $(this).css("color", "white")
        $(this).css("background-color", "#e5560a")
    } else if (x > 165) {
        $(this).css("color", "white")
        $(this).css("background-color", "#7b3014")
    } else if (x == null) {
        $(this).css("color", "white")
        $(this).css("background-color", "#7b3014")
    }
});
}  
函数颜色索引(数据){
$(“.index_num”)。每个(函数(){
var x=$(this.text();
如果(x25)&(x50)&(x80)&(x115)&(x140)&(x165){
$(this.css(“颜色”、“白色”)
$(this.css(“背景色”,“#7b3014”)
}else如果(x==null){
$(this.css(“颜色”、“白色”)
$(this.css(“背景色”,“#7b3014”)
}
});
}  
这是伟大的作品,所有的风格都是内联添加,每个人都很高兴。但是,当我转到打印时,样式会被忽略,并且框都会在没有背景色的情况下打印。如何更改我的代码以确保它们以正确的背景色打印


谢谢。

一个想法。。。与使用JS为元素指定内联样式属性不同,您可能需要以另一种方式进行。您可以尝试以类(在打印样式表中定义)的形式应用背景色,甚至可以将新样式元素附加到头部。

打印背景色必须在浏览器的打印设置中。否则,再多的背景样式也不会有什么不同

使用非标准属性可能在诸如Chrome和Safari之类的WebKit浏览器中工作,但在其他地方不会。(有一个,但还没有。)


如果打印背景颜色非常重要,并且您无法控制用户浏览器的设置,那么您可以通过拉伸完全定位的彩色图像来填充单元格。

是否有媒体打印?是的……我正在进行的所有其他格式设置(如布局和隐藏项)都可以正常工作。我想问题在于确保内联CSS实际上用于打印媒体查询。是否符合您的需要?它应该强制具有此属性的元素上的颜色出现在打印中。将它放在
主体上
以强制打印所有颜色。您确定它不是您的浏览器吗?某些浏览器不会打印背景色和图像,除非您将其设置为打印背景色和图像。@JamesWilkins它不会打印任何内联样式的颜色。例如,我的字体应该是一种不同的颜色,使用内联样式,它们只是打印成黑色。如果我不能用现在的样式找到更直接的字体,这可能是一个有趣的解决方法。谢谢。这是有道理的,可能是另一种解决办法。我不知道浏览器打印中的背景色部分。不过,它为什么会在那里是有道理的。其他内联样式如“我的字体颜色”如何?似乎有些浏览器在不打印背景色时会阻止打印白色文本,因为它可能不会显示。你是如何决定用背景色来解决这些问题的?