javascript - 使用 jqprint 使用 CSS 打印特定的 DIV

标签 javascript html css jqprint

我想用 css 打印一个 div。当我应用 inline css 但在 external and internal css 中它不起作用时,它与我一起工作。下面是我的代码,

<script src="jquery.jqprint.0.3.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
  $("#PrintButton").click( function() {
      $('#divToPrint').jqprint();
      return false;
  });
});
</script>

<style type="text/css">
@media screen,print
  {
  .test {background:#0F0; width:500px; height:200px;}
  }
</style>

<input id="PrintButton" type="button" name="Print" value="Print" />

<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>

最佳答案

我已经尝试过您的代码,它似乎可以与外部 CSS 一起正常工作。

<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jqprint-0.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="test.css">

<script language="javascript" type="text/javascript">
$(function() {
  $("#PrintButton").click( function() {
      $('#divToPrint').jqprint();
      return false;
  });
});
</script>
</head>
<body>
<input id="PrintButton" type="button" name="Print" value="Print" />

<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>
<body>
</html>

和外部 css 文件名:test.css

@media screen,print
{
  .test {
            background:#0F0; width:500px; height:200px;
        }
}

关于javascript - 使用 jqprint 使用 CSS 打印特定的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21065908/

相关文章:

javascript - Facebook likebox 在 IExplore 中消失

css - 为什么::before伪元素出现在元素之上?

javascript - 放大弹出模态问题 'GetInline'

javascript - JS在定位 anchor 时隐藏一个div

javascript - 对于 D3 堆叠条,我如何知道鼠标位于哪个条中?

html - 表格中的复选框以选择 Angular 中的表格行

html - 如何垂直居中 facebook line iframe

html - 如何在外部div的底部显示两个内部div

javascript - 使用 JavaScript 按字符串设置 CSS 属性

javascript - 始终将 Canvas 形状显示在另一个形状之上