0

我有一个div可以通过更改其十六进制值来控制颜色的颜色，但是如何将其打印为我选择的任何颜色而不是我在 上的原始颜色div？

例如：我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>

这是我的按钮并选择div：

<div id="printReady"> 

div I want to print
</div>

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

2 回答 2

0

添加样式

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

例如

<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>
于 2012-10-15T09:24:32.220 回答
0

如果我理解了你的问题，你可以在 printSpecial() 的顶部添加这行代码：

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

控制这种事情的更好方法是使用样式。

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

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

然后你可以使用 jQuery.addClass 和 jQuery.removeClass。这样，您只需将 CSS 更改为您想要在两种“状态”中拥有的任何内容。

然后你这样做来改变风格：

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

然后当你想把它改回来时反过来。

于 2012-10-15T09:22:37.607 回答