站長(zhǎng)資訊網(wǎng)在上一篇《教大家在JavaScript中以不同的方式聲明變量》中給大家介紹了怎么在JavaScript中以不同的方式聲明變量，感興趣的朋友可以了解學(xué)習(xí)一下~
本文的主要內(nèi)容則是教大家怎么使用JavaScript打印div元素的內(nèi)容！
那么要在 JavaScript 中打印 div 的內(nèi)容，我們需要整理好實(shí)現(xiàn)的思路：
首先將 div 的內(nèi)容存儲(chǔ)在 JavaScript 變量中；然后單擊打印按鈕，提取 HTML div 元素的內(nèi)容；然后創(chuàng)建一個(gè) JavaScript 彈出窗口，并將提取的 HTML div 元素的內(nèi)容寫入彈出窗口；最后使用 JavaScript 窗口打印命令打印該窗口。
下面我們就通過(guò)兩種方法來(lái)實(shí)現(xiàn)：
第一種方法：本示例使用 JavaScript 窗口打印命令打印 div 元素的內(nèi)容
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <script> function printDiv() { var divContents = document.getElementById("GFG").innerHTML; var a = window.open('', '', 'height=500, width=500'); a.document.write('<html>'); a.document.write('<body > <h1>Div contents are <br>'); a.document.write(divContents); a.document.write('</body></html>'); a.document.close(); a.print(); } </script> </head> <body style="text-align:center;"> <div id="GFG" style="background-color:#00a2d4;"> <h2>PHP中文網(wǎng)</h2> <p> 這是在div中，點(diǎn)擊按鈕后則會(huì)顯示打印。 </p> </div> <input type="button" value="點(diǎn)擊打印" onclick="printDiv()"> </body> </html>
點(diǎn)擊按鈕前的效果如下：
接著我們點(diǎn)擊“點(diǎn)擊打印”按鈕，出現(xiàn)如下圖：
第二種方法：本示例使用 JavaScript 窗口打印命令打印 div 元素的內(nèi)容
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <script> function printDiv() { var divContents = document.getElementById("GFG").innerHTML; var a = window.open('', '', 'height=500, width=500'); a.document.write('<html>'); a.document.write('<body > <h1>Div contents are <br>'); a.document.write(divContents); a.document.write('</body></html>'); a.document.close(); a.print(); } </script> </head> <body> <center> <div id="GFG" style="background-color:#9a9afb;"> <h2>PHP中文網(wǎng)</h2> <table border="1px"> <tr> <td>姓名</td> <td>分?jǐn)?shù)</td> </tr> <tr> <td>張三</td> <td>110</td> </tr> </table> </div> <p> 表格在div中，點(diǎn)擊按鈕就會(huì)打印出來(lái)。 </p> <input type="button" value="點(diǎn)擊打印" onclick="printDiv()"> </center> </body> </html>
點(diǎn)擊按鈕前的效果如下：
點(diǎn)擊“點(diǎn)擊打印”按鈕后的效果，則如下所示：
最后給大家推薦《JavaScript基礎(chǔ)教程》~歡迎大家學(xué)習(xí)~
