ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明
JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明
- 藏色散人オリジナル
- 2021-08-18 10:26:424643ブラウズ
前の記事「JavaScript で変数をさまざまな方法で宣言する方法をみんなに教える 」では、JavaScript で変数をさまざまな方法で宣言する方法を紹介しました。興味のある友達はそれについて学ぶことができます。 ~
この記事の主な内容は、JavaScript を使用して div 要素の内容を出力する方法を説明することです。
したがって、JavaScript で div の内容を印刷するには、実装のアイデアを整理する必要があります:
まず div の内容を JavaScript 変数に保存し、次に印刷ボタンをクリックして、 HTML div 要素を抽出し、次に JavaScript ポップアップ ウィンドウを作成し、抽出した HTML div 要素のコンテンツをポップアップ ウィンドウに書き込み、最後に JavaScript window print コマンドを使用してウィンドウを印刷します。
以下では 2 つの方法で実装します:
最初の方法: この例では、JavaScript ウィンドウの print コマンドを使用して div 要素のコンテンツを印刷します。
<!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中文网</h2>
<p>
这是在div中，点击按钮后则会显示打印。
</p>
</div>
<input type="button" value="点击打印" onclick="printDiv()">
</body>
</html>ボタンをクリックする前の効果は次のとおりです:
2 番目の方法: この例では、JavaScript ウィンドウの印刷コマンドを使用して div 要素のコンテンツを印刷します
<!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中文网</h2>
<table border="1px">
<tr>
<td>姓名</td>
<td>分数</td>
</tr>
<tr>
<td>张三</td>
<td>110</td>
</tr>
</table>
</div>
<p>
表格在div中，点击按钮就会打印出来。
</p>
<input type="button" value="点击打印"
onclick="printDiv()">
</center>
</body>
</html>ボタンをクリックする前の効果は次のとおりです。以下:
JavaScript 基本チュートリアル》~皆さんもぜひ学習してください~
以上がJavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。