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

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

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

CSS:

#myDiv { display: block!important; } 

我找到了一个解决办法(至少对我来说是可行的)。在我的例子中,我有一个基本的HTML页面,它有一些样式(screen.css&print.css),加上一些javascript,用额外的功能逐步增强页面,等等。

到了打印页面的时候,我意识到JS影响了布局(因为我通过jquery做了一些CSS样式)。

我最后做的是:

在“屏幕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.) */
}

在“打印。CSS”中

body {
    background-color: #fff;
}

在“javascript文件.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”
• 浏览器加载“javascript文件.js”
• JS检查背景色…这是“……CCC”…
• JS做它的事
• 用户点击打印命令
• 浏览器加载“print.css”
• 车身背景颜色变为“FFF”
• 浏览器加载“javascript文件.js”
• JS检查车身背景色
• JS意识到背景色是“fff”
• JS什么都不做:)

希望这能帮助别人。)

使用 !important 已经提到过了,但它是一个钝器,一旦你开始需要覆盖已经存在的东西,事情就会变得非常复杂。 !重要的 .

CSS最大的好处之一是它允许您将样式与结构分离。而不是使用JS来操作 风格 对于元素,使用它来操作 结构 . 例如,通过操作 className 财产。

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

这有一个额外的好处,您不需要考虑必须覆盖这些样式,因为它们不会首先应用(用于打印)。

我建议你看看这篇文章: CSS Design: Going to Print .

Grz,克里斯。