○javascriptとコントロール

javascriptで次のボタンを押すことによりコントロールの状態が変更されます

状態を元に戻す

■ TextArea
値を設定して色を変更する
TextArea1
▽ html
<textarea id="TextArea1" cols="20" rows="2">TextArea1</textarea>
▽ javascript
document.getElementById("TextArea1").value="test";
document.getElementById("TextArea1").style.color='white';
document.getElementById("TextArea1").style.backgroundColor='black';

■ text
値を設定する

▽ html
<input id="TextBox1" type="text" value="TextBox1" />
▽ javascript
document.getElementById("TextBox1").value="test";

■ file

▽ html
<input id="File1" type="file"/>
▽ javascript
読み出し専用　書き込めない

■ password
値を設定する

▽ html
<input id="Password1" type="password" />
▽ javascript
document.getElementById("Password1").value="test";

■ checkbox
フラグを立てる
Checkbox1
▽ html
<input id="Checkbox1" type="checkbox"><span id="Checkbox1.Label">Checkbox1</span></input>
▽ javascript
document.getElementById("Checkbox1").checked=true;
文字はラベルの埋め込みです

■ radio
フラグを立てる
Radio1
Radio2
▽ html
<input id="Radio1" type="radio" name="name"><span id="Radio1.Label">Radio1</span></input>
<input id="Radio2" type="radio" checked name="name"><span id="Radio2.Label">Radio2</span></input>
▽ javascript
document.getElementById("Radio1").checked=true;
文字はラベルの埋め込みです

■ label
値を設定する
Label
▽ html
<span id="Label1">Label</span>
▽ javascript
document.getElementById("Label1").innerHTML="test";

■ DropDownList 幅数が1のselected
選択する
a b c test DropDownList1
▽ html
<select name="DropDownList1" id="DropDownList1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="test">test</option>
<option value="DropDownList1" selected="selected">DropDownList1</option>
</select>
▽ javascript
document.getElementById("DropDownList1").value="test";

■ ListBox 幅数が4のselected
選択する 値の追加　値の削除
a b c test ListBox1
▽ html
<select size="4" name="ListBox1" id="ListBox1">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="test" selected="selected">test</option>
<option value="ListBox1" selected="selected">ListBox1</option>
</select>
▽ javascript
var pos = document.createElement('option');
pos.value = "add";
pos.innerHTML = "add";
document.getElementById("ListBox1").appendChild(pos);

document.getElementById("ListBox1").options[0] = null;

document.getElementById("ListBox1").value="test";

■ button
値を設定する 無効化

▽ html
<input id="Submit2" type="button" value="状態変更" onclick="return button_click()" />
▽ javascript
document.getElementById("Submit2").value="test";
document.getElementById("Submit2").disabled=true;



▲トップページ > Visual BASIC と C#