如何使用jQuery或JavaScript打印变化的div

Question

I have a div of which I can control the color by changing its hexadecimal value, but how do I print it to be at whichever color I choose instead of the original color I had on the div ? 我有一个div ，可以通过更改其十六进制值来控制颜色，但是如何将其打印为所选的任何颜色，而不是div上的原始颜色？

For example : my div is white . 例如：我的div是白色的 。 I changed the color to red and I have a button that allows me to print that div , but it shows me that I'm printing a white div instead of a red one. 我将颜色更改为红色，并且有一个按钮可以打印该div ，但它显示我正在打印白色 div而不是红色 div 。

<script language="JavaScript">
var gAutoPrint = true; // Tells whether to automatically call the print function

function printSpecial()
{
if (document.getElementById != null)
{
var html = '<HTML>\n<HEAD>\n';

if (document.getElementsByTagName != null)
{
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0)
html += headTags[0].innerHTML;
}

html += '\n</HE>\n<BODY>\n';

var printReadyElem = document.getElementById("printReady");

if (printReadyElem != null)
{
html += printReadyElem.innerHTML;
}
else
{
alert("Could not find the printReady function");
return;
}

html += '\n</BO>\n</HT>';

var printWin = window.open("","printSpecial");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint)
printWin.print();
}
else
{
alert("The print ready feature is only available if you are using a browser. Please
update your browser.");
}
}

</script>

This is my button and selected div : 这是我的按钮，并选择了div ：

<div id="printReady"> 

div I want to print
</div>

<a href="javascript:void(printSpecial())" style="position:absolute">Print this Page</a>

Answer 1

If I've understood your question, you can just add at the top of printSpecial() this line of code: 如果我已经理解了您的问题，则可以在printSpecial（）的顶部添加以下代码行：

$('#printReady').css('background', '#ff0000');

A better way of controlling this kind of thing though would be to use a style. 控制这种事情的更好的方法是使用样式。

<style>
   .ready {
     background: #ffffff;
   }

   .printing {
     background: #ff0000;
   }
</style>

Then you can use jQuery.addClass and jQuery.removeClass. 然后，您可以使用jQuery.addClass和jQuery.removeClass。 That way you just change your CSS to whatever you want to have in both "states". 这样，您只需将CSS更改为两种状态下都想拥有的内容即可。

You then do this to change the style: 然后，您可以执行以下操作来更改样式：

$('#printReady').removeClass('ready');
$('#printReady').addClass('printing');

And then in reverse when you want to change it back. 然后，当您想将其改回时，则相反。

Answer 2

Add a style 添加样式

html += '<style>* { color: red }</style>';

for example 例如

<script language="JavaScript">
var gAutoPrint = true; // Tells whether to automatically call the print function

function printSpecial() {
  if (document.getElementById == null) return false;
  var printReadyElem = document.getElementById("printReady");
  if (printReadyElem==null) {
    alert("Could not find the printReady function");
    return false;
  }

  var html = '<HTML>\n<HEAD>\n';

  if (document.getElementsByTagName != null) {
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
  }

  html += '<style>* { color: red }</style>';
  html += '\n</HEAD>\n<BODY>\n';
  html += printReadyElem.innerHTML;
  html += '\n</BODY>\n</HTML>';

  var printWin = window.open("","printSpecial");
  if (printWin) {
    printWin.document.write(html);
    printWin.document.close();
    if (gAutoPrint) {
      printWin.focus().print();
    }
  }    
  else {
    alert("The print ready feature is only available if you are using a browser that supports it and you have not blocked popups. Please update your browswer.");
  }
  return false;
}
</script>


this is my button and selected div

  <div id="printReady"> 

  div i want to print
  </div>

  <a href="#" onclick="return printSpecial()" style="position:absolute">Print this Page</a>

如何使用jQuery或JavaScript打印变化的div

问题描述

2 个解决方案

解决方案1
0 2012-10-15 09:22:37

解决方案2
0 2012-10-15 09:24:32

如何使用jQuery或JavaScript打印变化的div

问题描述

2 个解决方案

解决方案1 0 2012-10-15 09:22:37

解决方案2 0 2012-10-15 09:24:32

解决方案1
0 2012-10-15 09:22:37

解决方案2
0 2012-10-15 09:24:32