JavaScriptでページ内の特定の位置に文字を出力する - JavaScript
JavaScriptでページ内の特定の位置に文字を出力するコードを紹介します。
概要
JavaScriptでページ内の特定の位置に文字を出力する場合には、出力する位置にIDを設定したタグを配置し、IDをキーにしてタグの要素を取得します。取得したオブジェクトのinnerText, innerHTMLプロパティに値を代入することで、ページ内の指定した位置に文字列等を出力できます。
IDからそのIDが設定されている要素を取得するには、document.getElementById()メソッドを利用します。
プログラム例
コード
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
window.onload = function onLoad() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
}
</script>
<style>
<!--
.header-footer {
border: solid 1px #ff6a00;
background-color: #fffba9;
}
.contents {
margin-top:8px;
margin-bottom:8px;
text-align: center
}
-->
</style>
</head>
<body>
<div class="header-footer">ヘッダです</div>
<div class="contents" id="output"></div>
<div class="header-footer">フッタです</div>
</body>
</html>
解説
下記コードで windows.onloadイベントにonLoad()関数を割り当てることで、ウィンドウが表示された際にonLoad()関数を実行する動作にします。
window.onload = function onLoad() {
documentオブジェクトのgetElementById()メソッドを呼び出し"output"というIDを持つタグ要素を取得します。今回のコードの場合はbodyタグに囲まれた"<div style="text-align:center" id="output"></div>"の要素が取得できます。
target = document.getElementById("output");
下記のコードで取得したdivタグの要素内に"Penguin"という文字列を挿入します。この処理により"output"というIDのタグの位置に文字列を表示できます。
target.innerHTML = "Penguin";
実行結果
HTMLファイルを表示します。ヘッダとフッタの間に配置した"output"のIDを持つdivタグ内に"Penguin"の文字列が表示されます。
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
window.onload = function onLoad() {
target = document.getElementById("output");
target.innerHTML = "Penguin";
}
</script>
<style>
<!--
.header-footer {
border: solid 1px #ff6a00;
background-color: #fffba9;
}
.contents {
margin-top:8px;
margin-bottom:8px;
text-align: center
}
-->
</style>
</head>
<body>
<div class="header-footer">ヘッダです</div>
<div class="contents" id="output">Penguin</div>
<div class="header-footer">フッタです</div>
</body></html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
