0

私は自分のページに3つの画像を含めようとしています。これらの画像は、次の動作を実行する必要があります。境界のない画像をクリックすると、その画像に境界線が表示されます。境界線のある画像をクリックすると、境界線が削除されます。つまり、その画像では、クリックするたびに境界線のオンとオフが切り替わります。

クリックすると境界線が表示されますが、再度削除する方法がわかりません。

これは私がこれまでにJSに対して持っているものです：

ims = document.getElementsByTagName("img");

for( i=0 ; i<ims.length ; i++ ){

  ims[i].onclick=function(){

    this.style.borderStyle = "solid";
    this.style.borderColor = "red";
  }
}
4

2 に答える 2

1

スタイルを確認できます：

    ims[i].onclick=function() {

        if (this.style.borderStyle == "solid") {
            this.style.borderStyle = "none";
        } else {
            this.style.borderStyle = "solid";
            this.style.borderColor = "red";
        }

    }

JSFiddle

于 2013-03-22T01:34:19.863 に答える
0

ここでは、Doorknob に基づくソリューションがありますが、コメントで推奨したように、クラスがあります。

var ims = document.getElementsByTagName("img");

for( var i=0 ; i<ims.length ; i++ ){
  ims[i].onclick=function() {
    if (this.className == "clicked") {
      this.className = "";
    } else {
      this.className = "clicked";
    }
  };
}

そしてcssクラス：

img {
  padding: 5px;
}
img.clicked {
  padding: 0;
  border: 5px solid red;
}

ここでは、クラスを使用する利点を確認できます。

これがjsFiddleです。

imgさらに調査するために、タグに複数のクラスがある場合の方法を確認することをお勧めします;)。不明な点があれば再度質問してください。

于 2013-03-22T02:03:10.463 に答える