关闭打印预览后,为什么我的打印预览元素没有隐藏?

时间:2018-10-16 15:20:47

标签: javascript jquery html css html5

我希望在打印预览关闭时隐藏打印内容类。在IE中按Control P即可触发它,或直接转到文件>打印预览。感谢您的任何提前帮助。

  <script src="Scripts/jquery-1.10.2.min.js"></script>
<style type="text/css" media="print" ">
    .print-content {
        display: none !important;
    }


    @media print {
        .print-content { display: block !important;}

        textarea {
            display: none !important;
        }
    }
</style>
<script type="text/javascript">
    window.onbeforeprint = function () {
        $('.print-content').remove();
        $('textarea').each(function () {
            var text = $(this).val();
            $(this).after('<p class="well print-content">' + text + '</p>');
        });
    }
</script> 

TextArea标记

 <form id="form1" runat="server">
    <div>
        <textarea name="textarea" id="the_textarea">    Some note
            orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt congue cursus. Nunc nib
        </textarea>

    </div>
</form>  

2 个答案:

答案 0 :(得分:1)

从样式标签中删除w2ui

答案 1 :(得分:1)

好的,问题在于您添加样式标签的方式。您已设置属性media="print",因此以下CSS 将不会应用于屏幕。

.print-content {
  display: none !important;
}

解决方案是删除media="print",因为您已经使用@media print {}查询添加了@media