オブジェクトの表示非表示を制御する

このページをソーシャルブックマークしてみんなに紹介する！ -->

オブジェクトの表示非表示を制御する

オブジェクトを表示したり、非表示にしたりする Javascript です。
ユーザーの操作によって項目や文章を切り替えたりすることが出来ます。

その１　表示している場合は非表示、非表示の場合は表示するスクリプト

＜フォーム＞

<form><input type="button" value="表示切替" onClick="checkExpand('text');"></form>
<span id="text">あいうえお</span>

フォーム側の処理で1行目のボタンのクリックイベント「onClick="checkExpand('Text');"」で表示を切り替えるオブジェクトを指定し、以下のスクリプトを呼びます。

＜スクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* 機　能：オブジェクトの表示非表示を制御する 1
* （表示している場合は非表示、非表示の場合は表示）
* 引　数： ch 表示/非表示を切り替えるオブジェクト名
* 戻り値：なし
****************************************************************/
function checkExpand(ch) {
var obj=document.all && document.all(ch) || document.getElementById && document.getElementById(ch);
if(obj && obj.style) obj.style.display=
"none" == obj.style.display ?"" : "none"
}
//-->
</script>

上記スクリプトを <head></head> の間に記述します。
引数で渡されたオブジェクトが表示されている時は非表示になり、非表示の時は表示されます。

その２　表示、または非表示を指定するスクリプト

＜フォーム＞

<form><input type="button" value="非表示" onClick="ChDsp(0,'text');"></form>
<a href="javascript:ChDsp(1,'text');">表示</a>
<span id="text">あいうえお</span>

ボタンの場合とアンカータグの場合の２通りの例を示しています。
第１引数で、0 を渡すと非表示に、1 を渡すと表示されます。
第２引数で、表示／非表示を切り替えるオブジェクトの ID を渡します。
1行目の[非表示]ボタンをクリックすると、3行目の文字列が非表示になります。
2行目の「表示」リンクをクリックすると、3行目の文字列が表示されます。

＜スクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* 機　能：オブジェクトの表示非表示を制御する 2
* （表示/非表示を指定する）
* 引　数： ch 表示/非表示を切り替えるオブジェクト名
* flg 表示非表示フラグ（0:非表示、1:表示）
* 戻り値：なし
****************************************************************/
function ChDsp(flg,ch){
var obj=document.all && document.all(ch) || document.getElementById && document.getElementById(ch);
if(obj && obj.style){
if(flg){
obj.style.display = "block";
} else {
obj.style.display = "none";
}
}
}
//-->
</script>

上記スクリプトを <head></head> の間に記述します。
第１引数で 1 が渡されると 14行目の処理に流れ、
第２引数で渡されたオブジェクトのスタイルの display が block （表示）になります。
第１引数で 0 が渡されると 16行目の処理に流れ、
第２引数で渡されたオブジェクトのスタイルの display が none （非表示）になります。

その３　表示、または非表示にするオブジェクトを指定するスクリプト

＜フォーム＞

<form><input type="button" value="あいうえお" onClick="ChDsp2('text1','text2');"></form>
<a href="javascript:ChDsp2('text2','text1');">かきくこけ</a>
<span id="text1">あいうえお</span>
<span id="text2">かきくこけ</span>

その２の応用編です。
第１引数のオブジェクトが表示され、第２引数のオブジェクトが非表示になります。
1行目の[あいうえお]ボタンをクリックすると、3行目の文字列が表示され、4行目の文字列が非表示になります。
2行目の「かきくこけ」リンクをクリックすると、4行目の文字列が表示され、3行目の文字列が非表示になります。

＜スクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* 機　能：オブジェクトの表示非表示を制御する 3
* （表示/非表示のオブジェクトを切り替える）
* 引　数： strShow 表示するオブジェクト名
* strHidden 非表示にするオブジェクト名
* 戻り値：なし
****************************************************************/
function ChDsp2(strShow,strHidden){
var obj='';
obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow);
obj.style.display = "block";
obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden);
obj.style.display = "none";
}
//-->
</script>

上記スクリプトを <head></head> の間に記述します。
第１引数で渡されたオブジェクトのスタイルの display が block （表示）になり
第２引数で渡されたオブジェクトのスタイルの display が none （非表示）になります

スポンサードリンク

< 戻る