JavaScriptを使用して印刷する方法-フロントエンドQ&A-php.cn

JavaScriptを使用して印刷する方法

藏色散人

リリース： 2023-01-07 11:44:01

オリジナル

2168 人が閲覧しました

JavaScript には組み込みの印刷機能や表示機能はありませんが、さまざまな方法でデータを「表示」できます: 1. "window.alert()"; 2. "document.write( ) "; 3. "innerHTML"; 4. "console.log()"。

JavaScriptを使用して印刷する方法

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター

JavaScript の印刷方法?

JavaScript には、組み込みの印刷機能や表示機能はありません。

JavaScript 表示スキーム

JavaScript はさまざまな方法でデータを「表示」できます:

window.alert() を使用してアラートボックスを作成します

document.write() を使用して HTML 出力を書き込みます

innerHTML を使用して HTML 要素を書き込みます

console.log() を使用してブラウザのコンソールに書き込みます

innerHTML を使用する

HTML 要素にアクセスするには、JavaScript は document.getElementById(id) メソッドを使用できます。

id 属性は HTML 要素を定義します。 innerHTML 属性は HTML コンテンツを定義します。

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

ログイン後にコピー

ヒント: HTML 要素の innerHTML 属性を変更するのは、HTML でデータを表示する一般的な方法です。

document.write() を使用する

テスト目的では、document.write() を使用する方が便利です。

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

ログイン後にコピー

注: HTML ドキュメントが完全にロードされた後に document.write() を使用すると、既存の HTML がすべて削除されます:

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>

ログイン後にコピー

ヒント: document.write() メソッドはテストのみ。

#window.alert() の使用

#アラートボックスを使用してデータを表示できます:

Example

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

ログイン後にコピー

console.log() の使用

ブラウザでは、console.log() メソッドを使用してデータを表示できます。

F12 でブラウザコンソールを起動し、メニューの「コンソール」を選択してください。

例

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

ログイン後にコピー

推奨学習: 「

javascript Advanced Tutorial」

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

JavaScriptを使用して印刷する方法