関数の引数にID名を活用

1: Info

2: Info

3: Info

★関数の引数にID名を文字列として渡す場合･･･（1:の例）

引数はallコレクションの配列として参照。配列のインデックスとして文字列ID名を渡す。
形式は
　　document.all["ID名"].style.プロパティ
　　document.all("ID名").style.プロパティ
ID名を""や''で囲い、文字列として渡す。
this.id 又は id でもよい(これらは文字列となる。this ではオブジェクトとなりエラーに)

★2:は、引数にID名の一部である数値を渡す例

★関数の引数にID名をオブジェクトとして渡す場合･･･（3:の例）

allコレクションのプロパティとして直接参照する。
　　形式は･･･ID名.style.プロパティ
ID名は""や''で囲わないで直接渡す。ID名を""や''で囲う場合、eval()関数を使い、文字列からオブジェクトに変換
する必要がある。
this でもオブジェクトとして識別できる（this.id やid は文字列なのでエラーに)。

<script language="JavaScript"><!--
function Func1(b,s,p){    // 1: の関数
  if(document.all(b).innerText == "関数の実行"){
    document.all(b).innerText = "元に戻す";
    document.all(s).innerText = "引数には文字列ID名をそのまま渡す。";
    document.all(p).style.width = 100;
  }else{
    Clear(b,s,p);
  }
}
function Func5(n){    // 2: の関数
  if(document.all("bt"+n).innerText == "関数の実行"){
    document.all("bt"+n).innerText = "元に戻す";
    document.all("sp"+n).innerText = "引数にはID名の一部である数値を渡す。";
    document.all("pic"+n).style.width = 20*n;
  }else{
    Clear("bt"+n,"sp"+n,"pic"+n);
  }
}
function Func8(b,s,p){    // 3: の関数
  if(b.innerText == "関数の実行"){
    b.innerText = "元に戻す";
    eval(s).innerText = "引数にはオブジェクトとしてのID名を渡す。";
    p.style.width = 100;
  }else{
    Clear("bt8",s,"pic8");
  }
}
function Clear(obj1,obj2,obj3){
  document.all(obj1).innerText = "関数の実行";
  document.all(obj2).innerText = "Info";
  document.all(obj3).style.width = 28;
}
//--></script>
</head>


<body>
<div> 1:
  <button id="bt1" onclick="Func1(this.id,'sp1','pic1');"> 関数の実行</button> 
  <span id="sp1">Info</span> 
  <img id="pic1" src="../../images/cut/tonbo.gif" width="28" height="16"> 
</div>
<div> 2:
  <button id="bt5" onclick="Func5(5);"> 関数の実行</button> 
  <span id="sp5">Info</span> 
  <img id="pic5" src="../../images/cut/tonbo.gif" width="28" height="16"> 
</div>
<div> 3 :
  <button id="bt8" onclick="Func8(this,'sp8',pic8);">関数の実行</button> 
  <span id="sp8">Info</span> 
  <img id="pic8" src="../../images/cut/tonbo.gif" width="28" height="16"> 
</div>

end(03/7/2)