打印时禁用 jQuery 定义的样式

Question

我有一个页面，其中包含许多通过 jQuery 在文档就绪和窗口滚动上定义的特性和样式，甚至确保它在禁用 JavaScript 的情况下很好地降级。然而，我只是在拼凑一个“打印”样式表，它废弃了大部分样式，当我测试它时，我意识到我的 jQuery 方法在打印和添加回一些背景图像时开始起作用。打印时是否可以禁用 JavaScript 或 jQuery，甚至是特定功能？

最大的问题是这件作品，它根据之前生成的数字生成随机背景图像...它覆盖了我的打印样式表对 background-image:none 的调用，即使使用 !important 标签：

$(document).ready(function() {
    $("body").css({backgroundImage: 'url(images/body_bg_'+background+'.jpg)'});
});

谢谢！

Answer 1

在样式表中定义您的样式。然后使用 JavaScript 更改 DOM 以使这些样式应用于元素，而不是修改样式属性。

这让您可以控制不同的媒体，并保持关注点（语义、表示和逻辑）的分离。

@media screen {
   body.something {
       background-image: url(images/body_bg_something.jpg);
   }
}

$(document).ready(function() {
    $("body").addClass('something');
}

也就是说：

它覆盖了我的打印样式表对 background-image:none 的调用，即使使用 !important

它确实不应该这样做。

Answer 2

您可以在没有任何 jquery 调用/引用的情况下将同一页面作为弹出窗口打开，然后调用页面的 window.print onload。就像 googlemaps 上的打印选项一样。