javascript - 如何用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

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

现在，当事件触发时检查第一类是否适用，然后将其删除并应用第二类。

例子

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";