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

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

例如，如果我通过Javascript隐藏了一些东西，但我想在打印中包含这些隐藏的信息

---

我使用Javascript隐藏了一个

div

，如果禁用Javascript，我想显示

div

。现在的问题是，因为

div

是使用Javascript隐藏的，所以打印页面时它也不会显示。

使用打印样式表和

！重要的

语句，强制元素在打印时可见

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

---

使用

！重要的

已经提到过，但它是一个钝工具，一旦你开始需要覆盖已经是

的东西，事情就会变得非常复杂！重要信息

CSS最大的好处之一是它允许您将样式与结构分离。与其使用JS来操纵元素的样式，不如使用它来操纵结构。例如，通过操纵

className

属性

然后，屏幕媒体样式表可以隐藏该元素，同时使其在打印媒体样式表中可见

这还有一个额外的好处，即您不必考虑必须覆盖这些样式，因为它们在一开始就不适用（用于打印）。

我找到了一个解决方法（至少它对我有效）。在我的例子中，我有一个基本的html页面，带有一些样式（screen.css和print.css），再加上一些javascript，用额外的功能逐步增强页面，等等

当打印页面时，我意识到js正在影响布局（因为我正在通过jquery进行css样式设计）

我最后做的是：

在“screen.css”中

在“print.css”中

在“javascript file.js”中

就这样！成功了

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

• 用户加载页面
• 浏览器加载“screen.css”
• 车身背景颜色设置为“#ccc”
• 浏览器加载“javascript文件.js”
• JS检查背景颜色。。。是“ccc”
• JS做它自己的事情
• 用户点击打印命令
• 浏览器加载“print.css”
• 车身背景颜色更改为“#fff”
• 浏览器加载“javascript文件.js”
• JS检查车身背景颜色
• JS意识到背景色是“fff”
• JS什么都不做：）

---

希望这对其他人有所帮助：）

@Andy E的头-感谢编辑我的问题以获得更好的效果。你的意思是我应该在

div

中添加单独的类以打印显示。你能解释一下吗detail@met：为

屏幕

创建一个类似打印可见的

的类，该类的样式设置为
显示：无
，并将该类添加到要隐藏的元素中，而不是使用内联样式。但我无法在css中保留
显示：无
。我作为
document.write（'#sitemapContainer{display:none；}'）隐藏起来这是一个。。。好主意。然而，这与关注点分离的原则相矛盾。一旦你决定改变你的CSS文件，JS就会崩溃。好的观点Pumbaa80:）我完全同意，我也不喜欢依赖关系，但是，我宁愿有一个记录良好的依赖关系，而不是100左右！到处都有重要的规则：-/在打印样式表中使用
important
是完全常见的，这没有什么错。您的解决方案的另一个问题是，如果屏幕和打印设计完全相同（在应用JS之前），那么它就不起作用了。根据@Barryles的想法，我们可以在页脚中使用一个带有id的div标记（可能会永远隐藏它！）。确保此div标记根本不用于内容。通过这种方式，我们可以在html中读取javascript的专用变量。需要注意的是，当删除JS应用的CSS翻译时，旋转应该设置为0，而翻译需要设置为相反的值（因此，如果使用JS向上翻译50px，则向下翻译50px以便打印）。
#myDiv { display: block!important; } 

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.) */
}

body {
    background-color: #fff;
}

$(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
}