ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明

JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明

藏色散人
リリース: 2021-08-18 10:26:42
オリジナル
4681 人が閲覧しました

前の記事「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(&#39;&#39;, &#39;&#39;, &#39;height=500, width=500&#39;);
            a.document.write(&#39;<html>&#39;);
            a.document.write(&#39;<body > <h1>Div contents are <br>&#39;);
            a.document.write(divContents);
            a.document.write(&#39;</body></html>&#39;);
            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>
ログイン後にコピー

ボタンをクリックする前の効果は次のとおりです:

JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明

# 次に、[クリックして印刷] ボタンをクリックすると、次の画像が表示されます:

JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明

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(&#39;&#39;, &#39;&#39;, &#39;height=500, width=500&#39;);
            a.document.write(&#39;<html>&#39;);
            a.document.write(&#39;<body > <h1>Div contents are <br>&#39;);
            a.document.write(divContents);
            a.document.write(&#39;</body></html>&#39;);
            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を使用してdiv要素の内容を出力する方法の詳細な説明

[クリックして印刷] ボタンをクリックした後の効果は次のとおりです:

JavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明

最後に、 "

JavaScript 基本チュートリアル》~皆さんもぜひ学習してください~

以上がJavaScriptを使用してdiv要素の内容を出力する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート