预览后打印媒体查询不隐藏类答案

【问题标题】：Print media query not hiding class after preview预览后打印媒体查询不隐藏类
【发布时间】：2015-04-21 00:26:15
【问题描述】：

我有一个打印预览库设置来向我们的用户展示完成的产品的外观。问题是我们实际上并不希望打印图像，因为我们将打印到已经标记的纸张上。

我已将打印媒体查询添加到 print.css 并对其进行了更改，以便我们所有的图像都被拾取并添加到存在于该 print.css 文件中的类 hideImg 中。

我要么正在寻找打印媒体查询不起作用的原因，要么正在寻找如何更改库/我的 jquery。我尝试将它们添加到不同的 div 中并更改预览中的活动内容，但没有成功。

类正在被拾取，控制台没有返回错误。

CSS：

@media print {
/* -- Hide screen specific elements -- */
.hideImg{

    display:none !important;
    visibility:hidden !important;

        }
}

jQuery

var images = document.getElementsByTagName("img");
            var i;

                for(i = 0; i < images.length; i++) {
                    images[i].className += "hideImg";
                }

HTML

<div id="content" class="container_12 clearfix">

     <div id="printableArea" style="display:none;">
        <img src="images/badgeHead.png" alt"needs more jpg"/>
                                      <h1>Hi, my name is...<br/> 
                                      </h1>

                                      <br>
         <img src="images/badgeFoot.png" alt"needs more jpg"/>
                                </div>    
</div>

库 jQuery

// Bind closure
            $('a', print_controls).bind('click', function(e) {
                e.preventDefault();
                //adding the printframe contentwindow rather than body prints out just what we want
                if ($(this).hasClass('print')) { print_frame[0].contentWindow.print(); }
                else { $.printPreview.distroyPrintPreview(); }
            });

【问题讨论】：

print_frame 是什么？另外，如果您已经在使用 jQuery，为什么要自己附加 hideImg 类，为什么不调用 addClass('hideImg')？
另外，如果您盲目地将hideImg 附加到所有<img> 元素，为什么不简单地使用img 作为打印样式表中的选择器？
在 print.css 中将其更改为 img 仍然没有任何区别。
那是一些看起来很有趣的 jQuery。但是images[i].className += "hideImg"; 应该是images[i].className += " hideImg";
这是一个 jQuery 库，用于获取可打印区域的预览。它确实很时髦，我需要寻找生产版本的替代品。

标签： javascript jquery html css

【解决方案1】：

全屏尝试下面的代码并给出打印命令。您可以按打印顺序查看检查文本。

@media print {
  /* -- Hide screen specific elements -- */
  .hideImg {
    display: none !important;
    visibility: hidden !important;
  }
}

<div id="content" class="container_12 clearfix">

  <div id="printableArea" style="display:none;">
    <img src="images/badgeHead.png" alt "needs more jpg"/>
    <h1>Hi, my name is...<br/> 
                                      </h1>

    <br>
    <img src="images/badgeFoot.png" alt "needs more jpg"/>
  </div>
  <div class="hideImg">hello</div>
  <h3>check</h3>
</div>

【讨论】：