body h 1 idid 1 idid 1Helloh 1

オブジェクトのイメージ <body> <h 1 id="id 1“ id="id 1">Hello</h 1> style=‘color: red’>Hello, World</h 1> </body> document. get. Element. By. Id(“id”) H 1要素のオブジェクト属性：色 (style. color): black HTMLテキスト (inner. HTML): Hello document. get. Element. By. Id(“id”). style. color = ‘red’; document. get. Element. By. Id(“id”). inner. HTML = ‘Hello, World’;

document. get. Element. By. Id関数 ex 14. html Java. Script function test() { var h 1 Value = document. get. Element. By. Id("id 1"). inner. HTML; alert(h 1 Value); document. get. Element. By. Id("id 1"). inner. HTML = prompt(''); var item 1 = document. get. Element. By. Id("item 1"). inner. HTML; alert(item 1); var item 2 = document. get. Element. By. Id("item 2"). inner. HTML; alert(item 2); var item 1 = document. get. Element. By. Id("item 3"). inner. HTML; alert(item 3); document. get. Element. By. Id("divid"). inner. HTML = "テスト"; document. get. Element. By. Id("divid"). style. color = "red"; document. get. Element. By. Id("divid"). style. font. Size = "200%"; document. get. Element. By. Id("divid"). style. background. Color = "black"; } HTML onload=‘関数名’ <body onload='test()'> <h 1 id="id 1">document. get. Element. By. Id関数</h 1> ドキュメントが完全に読み込まれた後に指定した関数を呼び出す <ul> <li id="item 1">項目 1</li> <li id="item 2">項目 2</li> <li id="item 3">項目 3</li> </ul> <div id="divid"></div> </body> divは「division（区画）」の略他の要素をまとめて，構造化する際に用いられる Java. Scriptで操作する対象になる 12

演習問題3 • div要素にid属性を指定し，Java. Scriptプログラムによりdiv要素のCSSプロパティを設定し，以下の長方形を表示するプログラムを作成せよ <div style="position: absolute; top: 40; left: 40; width: 150; height: 250; background-color: #0000 FF; border: thick solid red; visibility: visible; "> </div> Java. Script ヒント function show. Rect() { document. get. Element. By. Id(“rect”). style. ・・・・ document. get. Element. By. Id(“rect”). style. background Color = “#0000 FF”; } HTML <body onload=“show. Rect()”> <div id=“rect”></div> 13 </body>

テキストボックスの入力値の取得 Java. Script function get. Value() { var text = document. get. Element. By. Id("input"). value; document. get. Element. By. Id("output"). inner. HTML = text; } function check. Value() { var text = document. get. Element. By. Id("input"). value; if (text == "") { alert("文字を入力してください．"); } else { alert("OK"); } } HTML <form> 文字を入力してください。 <input type="text" id="input“ onkeyup=“get. Value()" /> <input type=“button” value=“値の確認" onclick=“check. Value()" /> </form> <div id="output"></div>