0

ユーザーが T シャツの色を選択する必要があるページがあります。

ユーザーが色を選択すると、画像の境界線の色が緑に変わります。

また、ユーザーが別の色をクリックした場合は、デフォルトの境界線の色を元に戻し、クリックされた新しい画像の境界線の色を変更する必要があります。

これがまさに私がやろうとしていることです。

どうすればそれができるのでしょうか？

4

2 に答える 2

3

次のようにタグを使用して画像が表示されてimgいるとします。

  <img name="img01" id="img01" src="image.gif" border="2" bordercolor="#000000">

以下のようにonClick 関数を実装fnChangeBorderします

   function fnChangeBorder(){
      document.getElementById("img01").style.borderColor="#00FF00";
   }

また

   function fnChangeBorder(){
      var imgElement = document.getElementById("img01");
      imgElement.setAttribute("style:borderColor", "#00FF00");
   }

または、スタイル クラスを定義して次のようにすることもできます。

   function fnChangeBorder(){
      document.getElementById("img01").style.className="greenClass";
   }

編集：

インデックス付き ID を持つ複数の画像の場合、onclick 関数でインデックスを次のように渡すことができます。

  <img name="img1" id="img1" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder(1);">

  <img name="img2" id="img2" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder(2);">

そして次のように更新fnChangeBorderします：

   function fnChangeBorder(index){
      document.getElementById("img"+index).style.className="greenClass";
   }

インデックス化されていない ID を持つ複数の画像の場合id、 onclick 関数で次のように渡すことができます。

  <img name="imgabc" id="imgabc" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder('imgabc`);">

  <img name="imgxyz" id="imgxyz" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder('imgxyz');">

そして次のように更新fnChangeBorderします：

   function fnChangeBorder(imageId){
      document.getElementById(imageId).style.className="greenClass";
   }
于 2012-10-11T05:20:56.223 に答える
1

スタイルで 1 つのクラスを作成します。例えば 

.selected{
   border : 1px solid green;
}

次に、アイテムのクリック時に className を適用します。setAttribute を使用して項目のクラス名を設定することは避けてください。いくつかの問題が発生しています。次に、画像をクリックすると、すべてのアイテムで選択したクラス名が削除され、選択したクラス名がターゲット画像に適用されます。

于 2012-10-11T05:35:15.247 に答える