javascript - 每次单击时，图像边框都会打开和关闭

Question

我正在尝试在我的页面上包含 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";
  }
}

Answer 1

您可以检查样式：

    ims[i].onclick=function() {

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

    }

JSFiddle

Answer 2

在这里，您有一个基于 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为了进一步调查，如果标签有多个类，我建议检查如何做;)。如果您有任何疑问，请再次询问。