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

Question

我有一個div ，可以通過更改其十六進制值來控制顏色，但是如何將其打印為所選的任何顏色，而不是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>

Answer 1

如果我已經理解了您的問題，則可以在printSpecial（）的頂部添加以下代碼行：

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

控制這種事情的更好的方法是使用樣式。

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

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

然后，您可以使用jQuery.addClass和jQuery.removeClass。 這樣，您只需將CSS更改為兩種狀態下都想擁有的內容即可。

然后，您可以執行以下操作來更改樣式：

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

然后，當您想將其改回時，則相反。

Answer 2

添加樣式

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>

如何使用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