表示、非表示を切り替える方法
スタイルシートで要素の非表示にするには、次のように書きます。
display:none;
これをJavaScriptで制御するには
表示
elem.style.display = "";
非表示
elem.style.display = "none";
となります。
ただしこの方法は、タグにstyle属性で直接かかれたもののみが制御できます。
classやidを使用したスタイルの制御はできません。
onClickで表示、非表示
リンクタグをクリックすることで表示、非表示を切り替えるには次のようになります。
<p>
<a href="#" onClick="toggle_view1();return false;">表示</a>
/ <a href="#" onClick="toggle_hidden1();return false;">非表示</a>
</p>
<div id="area_hoge1">
<p>ここを表示する</p>
</div>
<script language="JavaScript" type="text/javascript">
<!--
var elem1 = document.getElementById("area_hoge1");
function toggle_view1() {
elem1.style.display = "";
}
function toggle_hidden1() {
elem1.style.display = "none";
}
-->
</script>
これだと表示しているときも、非表示にしているときも両方のリンクが出ているので、
少し工夫して表示しているときには「非表示」のリンクだけ、非表示にしているときは「表示」のリンクだけを表示するようにするには、リンクタグもJavaScriptで表示、非表示にします。
ここを表示する
<p>
<a href="#" id="link_view2" onClick="toggle_view2();return false;" style="display:none;">表示</a>
<a href="#" id="link_hidden2" onClick="toggle_hidden2();return false;">非表示</a>
</p>
<div id="area_hoge2">
<p>ここを表示する</p>
</div>
<script language="JavaScript" type="text/javascript">
<!--
var elem2_1 = document.getElementById("area_hoge2");
var elem2_2 = document.getElementById("link_view2");
var elem2_3 = document.getElementById("link_hidden2");
function toggle_view2() {
elem2_1.style.display = "";
elem2_2.style.display = "none";
elem2_3.style.display = "";
}
function toggle_hidden2() {
elem2_1.style.display = "none";
elem2_2.style.display = "";
elem2_3.style.display = "none";
}
-->
</script>
radioボタンで表示、非表示
ここを表示する
<form name="form3" action="#" method="POST">
<p>
<label for="hoge3_1" onClick='view_ch3();'>
<input type="radio" name="hoge3" id="hoge3_1" value="1" checked="checked" onChange="view_ch3();"> 表示
</label>
/
<label for="hoge3_0" onClick='view_ch3();'>
<input type="radio" name="hoge3" id="hoge3_0" value="0" onChange="view_ch3();"> 非表示
</label>
</p>
</form>
<div id="area_hoge3">
<p>ここを表示する</p>
</div>
<script language="JavaScript" type="text/javascript">
<!--
function view_ch3() {
var elem3 = document.getElementById("area_hoge3");
var i;
if (document.form3.hoge3.length) {
for (i = 0; i < document.form3.hoge3.length; i++) {
if (document.form3.hoge3[i].checked) {
if(document.form3.hoge3[i].value == 0){
elem3.style.display = "none";
}else {
elem3.style.display = "";
}
}
}
} else {
if (document.form3.hoge3.checked) {
if(document.form3.hoge3.value == 0){
elem3.style.display = "none";
}else {
elem3.style.display = "";
}
}
}
}
-->
</script>
radioボタンが複数種類あったときに汎用性を持たせると次のようになります。
<form name="form4" action="#" method="POST">
<p>
<input type="radio" name="hoge4_1" value="1" onClick="view_ch('hoge4_1')" checked="checked" /> 表示
<input type="radio" name="hoge4_1" value="0" onClick="view_ch('hoge4_1')" /> 非表示
</p>
<div id="area_hoge4_1">
<p>ここを表示する</p>
</div>
<p>
<input type="radio" name="hoge4_2" value="1" onClick="view_ch('hoge4_2')" checked="checked" /> 表示
<input type="radio" name="hoge4_2" value="0" onClick="view_ch('hoge4_2')" /> 非表示
</p>
<div id="area_hoge4_2">
<p>ここを表示する</p>
</div>
</form>
<script language="JavaScript" type="text/javascript">
<!--
function view_ch(elemid) {
var elem4 = document.getElementById('area_' + elemid);
form_elem4 = document.form4.elements[elemid];
var i;
if (form_elem4.length) {
for (i = 0; i < form_elem4.length; i++) {
if (form_elem4[i].checked) {
if(form_elem4[i].value == 1){
elem4.style.display = "";
}else {
elem4.style.display = "none";
}
}
}
} else {
if (form_elem4.checked) {
if(form_elem4.value == 1){
elem4.style.display = "";
}else {
elem4.style.display = "none";
}
}
}
}
-->
</script>
関連記事
- JavaScriptで64bit版か32bit版の判別をする方法
- 経過時間、残り時間をリアルタイムに表示する方法
- 時間をHH:ii:ssのフォーマットで表示する方法
- ゼロ埋めする方法 printfの代替
- ページのタイトルを変更する titleタグ
- リンクを別ウインドウで開きながら、元のウインドウのページを遷移させる方法
- 複数のチェックボックスを同時にチェックする 全選択チェックボックス
- Aタグのtarget属性をJavaScriptで指定する方法
- ページを移動するときに警告を出す方法
- IE6でmin-width、max-width、min-height、max-heightを使用する方法
- 入力フォームでコピペ(コピー&ペースト)を禁止する方法
スポンサーリンク
