もっと詳しく
特定のHTMLのコンテンツを印刷して、将来使用するために保存する必要がある状況に遭遇したことがありますか? たとえば、それぞれのWebサイトから料理のレシピやデザインのアイデアを保存し、オフラインで作業しているときにこの情報を使用する必要があります。 このようなシナリオでは、HTMLの任意の要素のコンテンツを印刷する方法を知っていることが重要です。

このブログでは、Javascriptを使用してdiv要素のコンテンツを印刷する手順を学習します。

JavaScriptを使用してdiv要素のコンテンツを印刷する

以下に示す例の助けを借りて; 「」のコンテンツを印刷する手順を示します。div” エレメント。 したがって、次のセクションはHTMLコードとその説明で構成されます。

HTMLコード

  • まず、div要素を使用して、「id” なので “divCon」は、JavaScriptでコンテンツを取得するのに役立ちます。
  • 次のステップでは、「淡黄色」を「背景色追加された「div” エレメント。
  • div」要素、見出しと段落を追加します。

    ” と “

    」それぞれのHTMLタグ。

<<div id=「divCon」 スタイル=「背景色:薄黄色;」>>
<<h2>>JavaScriptを使用してdiv要素のコンテンツを印刷するh2>>
<<p>>
次に、JavaScriptを使用してdiv要素のコンテンツを出力します a 新着 窓。 プレス 下のボタンをクリックして結果を確認してください。
p>>
div>>

次に、「printDivContent()」Javascript関数の「オンクリック” イベント:

<<ボタンスタイル=“背景色:スカイブルー;” onclick=「printDivContent()」>>印刷ボタン>>

Javascriptコード
「」などのHTML要素のコンテンツを印刷するにはdiv」、そのデータを変数に格納する必要があります。 ここで、JavaScriptでコーディングしながら次の手順を実行します。

  • まず、「printDivContent()」。
  • 次に、「contentOfDiv” と “newWin」内の「printDivContent()” 関数。
  • divCon」id、「」のコンテンツを取得しますdiv” HTML要素を変数“に格納しますcontentOfDiv」。
  • 変数 “newWin」は、ポップアップとして印刷ウィンドウを開くために使用されます。
  • 次に、「newWin” JavaScriptメソッドを呼び出す変数“document.write()」。 このメソッドでは、「div」内に追加されたHTML要素のタグを渡します。これにより、指定された要素のコンテンツが取得されます。

上記の例の完全なコードは次のとおりです。

関数 printDivContent(()。 {{
var contentOfDiv = 資料。getElementById((「divCon」)。innerHTML;
var newWin = 窓。開いた(( ‘高さ=650、幅= 650’)。;
newWin。資料書きます(()。;
newWin。資料書きます((Javascriptを使用してDiv要素のコンテンツを印刷する)。;
newWin。資料書きます((

Div要素の内容:
)。;
newWin。資料書きます((contentOfDiv)。;
newWin。資料書きます(()。;
newWin。資料近い(()。;
newWin。印刷(()。;
}

上記のHTMLコードを実行すると、ブラウザでの出力は次のようになります。

印刷」ボタンはJavaScriptを「printDivContent()」機能と次のウィンドウが画面に表示されます。

ご覧のとおり、追加された「div” エレメント:

「」のコンテンツの印刷に必要なすべての情報を提供しました。div」要素はJavascriptを使用します。

結論

「の内容を印刷するにはdiv」要素、最初に、「」を割り当てる必要がありますid」をHTMLで入力し、JavaScriptコードで指定された「id」にアクセスしてデータを変数に格納します。 JavaScriptでプログラミングしているときに、Webページの特定のセグメントを印刷する必要がある場合があります。 そのような場合、私たちが提供する方法があなたを助けることができます。 このブログでは、JavaScriptを使用してdiv要素のコンテンツを印刷する手順について説明しました。

The post JavaScriptを使用してdiv要素のコンテンツを印刷する appeared first on Gamingsym Japan.