
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
JavaScript
2017.12.05
JavaScript で何らかの処理が行われた結果、画面上に新たな表示を行うプログラムを作る際に、表示内容のサイズが想定できる場合は予め表示領域を確保することができますが、そうでない場合は 表示スペースをどの程度用意するか悩ましいところです。
このような時に、innerHTML プロパティを使用すると、元のHTMLの要素の中身を書き換えて表示することができます。
今回は、innerHTML プロパティを使用して 表示内容を書き換える方法について紹介します。
1.innerHTML とは
2.テキストの書き換え
3.実行結果を表示
innerHTML は、HTML要素の中身を変更する際に使用する Elementオブジェクトのプロパティです。
Elementオブジェクトは、HTMLの エレメント( 要素 )を表すオブジェクトです。
div要素( <div> ~ </div> )等、HTML要素の内容を自由に変更できることによって、動的なWebページの作成が可能になります。
innerHTML プロパティを使って、次のような記述をすると、HTML要素の内容を書き換えることができます。
document .getElementById( ” id 名 ” ).innerHTML = 書き換え後の内容;
「 id 名 」には、書き換え対象となる HTML要素の id 名を指定します。
innerHTML プロパティを使って、テキストの書き換えをします。
書換ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { document.getElementById("dat").innerHTML = "<span style='color: red;'>Hello!</span>"; } //--> </script> <div style="background-color : #CCC;"> <form> <p id="dat" style="font-size: 120%;">こんにちは!</p> <input type="button" value="書換" onClick="disp()"> </form> </div>
デフォルトで、「 こんにちは! 」というテキストを表示する p 要素を、書換ボタンがクリックされたタイミングで「 Hello! 」というテキストに書き換えています。
書き換え後のテキストを赤字にするための CSS( “<span style=’color: red;’> </span> )も、タグをそのまま記述して指定できます。
先ほどのサンプルは、既に表示されていたテキストを、違う内容に書き換えましたが、デフォルトでは何も表示させず、プログラム実行の結果として、innerHTML プロパティを使って何らかの表示をする場合も、同様に記述します。
次のサンプルは、配列変数の中身を表示するプログラムです。
表示ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { var fruits = ["りんご", "みかん", "ぶどう", "メロン", "もも", "レモン"]; document.getElementById("dat").innerHTML =""; document.getElementById("dat").innerHTML +="<br>"; for (var i=0; i<fruits.length; i++) { document.getElementById("dat").innerHTML += "fruits[" + i + "]:" + fruits[i] + "<br>"; document.getElementById("dat").innerHTML +="<br>"; } } //--> </script> <div style="background-color : #CCC; padding : 20px 20px 0px;"> <form> ["りんご","みかん","ぶどう","メロン","もも","レモン"] <div style="display:inline-flex;"> 上の配列の値の格納状態を表示します <input type="button" value="表示" onClick="disp()"> </div> <div id="dat" style="background-color : #EEE;"></div> </form> </div>
タグをそのまま記述して指定できるので、「 <br> 」で改行もできます。
<table> や <tb> 等を使用すると、テーブル表示も可能です。
このサンプルのように、innerHTML プロパティを使用すると、表示させたい内容のサイズに合わせて表示領域が自動的に伸縮されるので、大変便利です。
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.