Javascript 预览后打印媒体查询未隐藏类

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

我已经将print media查询添加到print.css中，并对其进行了更改，以便拾取所有图像并将其添加到该print.css文件中的类hideImg中

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

正在拾取这些类，并且控制台不返回任何错误

CSS:

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

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

        }
}

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

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

<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>

// 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(); }
            });

jQuery

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

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

        }
}

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

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

<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>

// 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(); }
            });

---

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

@媒体打印{
/*--隐藏屏幕特定元素--*/
希代姆先生{
显示：无！重要；
可见性：隐藏！重要；
}
}

嗨，我的名字是…



你好
检查

什么是

打印框

？另外，如果您已经在使用jQuery，为什么要自己附加

hideImg

类，为什么不调用

addClass（'hideImg'）

？另外，如果您盲目地将

hideImg

附加到所有

元素，为什么不直接在打印样式表中使用

img

作为选择器呢？在print.css中将其更改为img仍然没有任何区别。这是一个非常有趣的jQuery。但是

images[i].className+=“hideImg”应该是
images[i].className+=“hideImg”这是一个jQuery库，用于获取可打印区域的预览。它确实很时髦，我需要为生产版本寻找替代品。