图片边框每次点击时都会打开和关闭

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

来源

2013-03-22 tidydee

请考虑选择一个正确的答案，如果你认为其中之一是有帮助的。 – Chango 2013-03-26 16:09:11

你可以检查风格：

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-22 01:34:19 Doorknob

我是否删除“for循环”？ – tidydee 2013-03-22 01:44:55

不行，你不行！ +1顺便说一句，即使我自己喜欢上课！ – adeneo 2013-03-22 01:45:20

@ user2147761不，你不知道。别客气！ – Doorknob 2013-03-22 01:50:28

在这里，您已经基于门把手上的解决方案，但与正如我对评论的建议：

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-22 02:03:10 Chango

图片边框每次点击时都会打开和关闭

回答

相关问题