Question

是否有任何解决方案可以禁用打印中的Javascript样式更改？

例如，如果我通过Javascript隐藏某些内容，但我想在打印中包含该隐藏信息。

我使用Javascript隐藏了div，如果禁用了Javascript，我想显示div。现在的问题是，因为div是使用Javascript隐藏的，所以在打印页面时也没有显示。

Answer 1

使用打印样式表以及!important语句强制元素可见以进行打印。

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

CSS：

#myDiv { display: block!important; }

Answer 2

我找到了一个解决方法（至少，它对我有用）。在我的实例中，我有一个带有一些样式的基本html页面（screen.css＆amp; print.css）以及一些javascript来逐步增强具有额外功能的页面等。

当打印页面的时候，我意识到js正在影响布局（因为我通过jquery做了一些css样式）。

我最终做的是：

“screen.css”

中的

body {
    background-color: #ccc; /* or whatever colour your designer chose; if it NEEDS to be white, simply change something else (e.g. background-image, font-size, etc.) */
}

“print.css”

中的

body {
    background-color: #fff;
}

“the -javascript-file.js”

中的

$(document).ready(function()
{
    if (isPrinting() == false)
    {
        init();
    }
});

function isPrinting()
{
    var isPrint = false;
    /* I'm not 100% sure about the string literal check 'rgb(255, 255, 255)',
       should do some testing here with other values || other attributes...
       (font-size, color, line-height, other attributes that will have the 
       greatest difference / variation between "screen" and "print" styles)
    */
    if ($('body').css('background-color') == 'rgb(255, 255, 255)')
    {
        isPrint = true;
    }
    return isPrint;
}

function init()
{
    // All sorts of awesome goes here
}

就是这样！它奏效了！

以下是对正在发生的事情的概述：

用户加载页面

浏览器加载“screen.css”

正文背景颜色设置为“#ccc”

浏览器加载“the-javascript-file.js”

JS检查背景颜色......它是“#ccc”......

JS做其事

用户点击打印命令

浏览器加载“print.css”

正文背景颜色更改为“#fff”

浏览器加载“the-javascript-file.js”

JS检查身体背景颜色

JS意识到背景颜色是“#fff”

JS什么都不做：）

希望这可以帮助那些人：）

Answer 3

!important的用法已被提及，但它是一种生硬的工具，一旦你开始需要覆盖已经!important的东西，事情会变得非常复杂。

CSS的一大好处是它允许您将样式与结构分开。而不是使用JS来操作元素的样式，而是使用它来操作结构。例如，通过操纵className属性。

然后，您的屏幕媒体样式表可以隐藏该元素，同时使其对于打印媒体样式表可见。

这还有一个额外的好处，你不需要考虑必须覆盖这些样式，因为它们不适用于首先（打印）。

Answer 4

我建议你看一下这篇文章：CSS Design: Going to Print。

Grz，Kris。

是否有任何解决方案可以禁用打印中的Javascript样式更改？

4 个答案: