如何用javascript做到这一点？ 它就像一个切换但我似乎没有找到切换功能

Question

我试图用javascript而不是jquery来做这件事。 我想点击图片，然后图片将有边框，但如果我再次点击它，那么边框将消失。 不知道如何做到这一点任何人都可以帮我一臂之力？

allImages = document.getElementsByTagName("img");

    for(i=0;i<allImages.length;i++)
{
    allImages[i].onclick=function()
    {
    this.style.borderColor="red";
    this.style.borderStyle="solid";
    }
}

Answer 1

使用id切换图像尝试此代码

var img = document.getElementById('image-id');

if( ! img.hasBorder ) {

     img.style.border="2px solid #f00";
     img.hasBorder = true;

} else {

     img.style.border = "";
     img.hasBorder = false;

}

---

更新的代码

allImages = document.getElementsByTagName("img");

for(i=0; i< allImages.length; i++ )
{
    allImages[i].onclick = function( e )
    {
           this.style.border = ( this.style.border == '')? "2px solid red":'';
    }
}

Answer 2

你可以做的是创建两个类，一个有边框，第二个没有边框。

现在当事件触发检查时，如果第一个类是applly然后删除它并应用第二个类。

例

var test = document.getElementById("test");
var testClass = test.className;

testClass = ( testClass == "first") ? "second" : "first";

Answer 3

尝试：

document.getElementById('id').style.border

Answer 4

尝试

//显示

document.getElementById('element').style.border = 'red';

//隐藏

document.getElementById('element').style.border = 'none';

Answer 5

var img = document.getElementById('image-id');
img.style.border = img.style.border ? "" : "2px solid red";