Javascript 单击按钮时如何更改按钮的背景？

好,好。我知道很多人都问过这个关于堆栈溢出的问题，但这些解决方案对我来说并不适用。所以我的问题很简单：我如何使女性av按钮和男性av按钮分别具有女性化身和男性化身的背景URL？这是我的密码：

正文{
保证金：0；
填充：0；
框大小：边框框；
背景色：黑色；
}
.化身{
证明内容：中心；
左边距：15%；
显示器：flex；
}
.选择一个用户文本{
字体家族：“最幸运的家伙”；
字体大小：400%；
证明内容：中心；
}
.选择一个用户名{
左边缘：25%；
}
.用户输入{
左边缘：29%；
}
.用户输入：焦点{
大纲：无；
}
.女性av按钮{
背景：无；
边界：无；
填充：1px；
}
.女性av按钮：聚焦{
}
.男av按钮{
背景：无；
边界：无；
填充：1px；
}
.女性av{
背景：url（'../img/female avatar screet.png'）无重复；
宽度：500px；
高度：700px；
}
.女影音：悬停{
背景：url（'../img/female avatar.png'）不重复；
宽度：500px；
高度：700px；
}
.男av{
背景：url（“../img/male avatar screet.png”）无重复；
宽度：500px；
高度：700px；
}
.男av：悬停{
背景：url（“../img/male avatar.png”）无重复；
宽度：500px；
高度：700px；
}

选择你的角色
选择一个用户名
//document.getElementsByClassName（“用户输入”）.style.height=“500px”；
函数chooseanav（）{
document.getElementsByClassName（'female-av'）.style.background=“url（'../img/female avatar.png'）不重复”；
}

您不必使用javascript来更改它。您可以在css中直接使用：focus

.male-av:focus{
     background: url("../img/male-avatar.png") no-repeat;
     width: 500px;
     height: 700px;
}

.female-av:focus{
    background: url('../img/female-avatar.png') no-repeat;
    width: 500px;
    height: 700px;
}

---

因此，当单击按钮时，您可以保留图像或更改背景颜色。但是，当在按钮外部单击时，它会恢复正常。

这将使任何具有类female av的元素在单击时更改其背景

let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
    fa[i].addEventListener('click',function(){
        this.style.background="url('../img/female-avatar.png') no-repeat";
    });
}

---

可能按钮本身包含图像，而不是CSS。 然后使用JavaScript函数更改图像

或者（更简单的选项）有一个JS函数，可以切换包含新图像的类和包含旧图像的类（旧图像类已经在其中）

说

/*将此添加到css（图像链接除外）*/
.确认{
背景：url（'https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg")不重复;；
}
1.未扣{
背景：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_纵横比%29.svg/480px-Flag_的_Tabajd_%281-1_纵横比%29.svg.png'）不重复；
}
/*将此添加到块*/
函数更改（）{
var btnImg=document.getElementById（“btn”）
btnImg.classList.toggle（“确认”）
btnImg.classList.toggle（“未勾选”）
}

将您的代码更改为

document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";

奇怪的是，与使用

.getElementById（）

时不同，当您使用

.getElementsByCassName（）

时，您需要为对象编制索引。我认为这是因为ID是唯一的，类可以很多

线索在

getElement

vs

getElements

中

编辑：要回答您关于在其外部单击等的评论，您必须稍微更改代码。检查我下面的代码片段，如果有任何不合理的地方请告诉我

正文{
保证金：0；
填充：0；
框大小：边框框；
背景色：黑色；
}
.化身{
证明内容：中心；
左边距：15%；
显示器：flex；
}
.选择一个用户文本{
字体家族：“最幸运的家伙”；
字体大小：400%；
证明内容：中心；
}
.选择一个用户名{
左边缘：25%；
}
.用户输入{
左边缘：29%；
}
.用户输入：焦点{
大纲：无；
}
.女性av按钮{
背景：无；
边界：无；
填充：1px；
}
.女性av按钮：聚焦{
}
.男av按钮{
背景：无；
边界：无；
填充：1px；
}
.女性av{
背景：url（'../img/female avatar screet.png'）无重复；
宽度：500px；
高度：700px；
}
.女影音：悬停{
背景：url（'../img/female avatar.png'）不重复；
宽度：500px；
高度：700px；
}
.男av{
背景：url（“../img/male avatar screet.png”）无重复；
宽度：500px；
高度：700px；
}
.男av：悬停{
背景：url（“../img/male avatar.png”）无重复；
宽度：500px；
高度：700px；
}

选择你的角色
选择一个用户名
var femaleAV=document.getElementsByClassName（'female-av'）[0]；
var maleAV=document.getElementsByClassName（'male-av'）[0]；
document.addEventListener（'click'，函数（e）{
如果（e.target.className=='female av'）{
femaleAV.style.background=“url（'../img/female avatar.png'）不重复”；
maleAV.style.background=“”；
}else if（e.target.className=='male av'）{
femaleAV.style.background=“”；
maleAV.style.background=“url（'../img/male avatar.png'）不重复”；
}否则{
femaleAV.style.background=“”；
maleAV.style.background=“”；
}
});

---

---

这将起作用：

//CSS
钮扣{
背景：蓝色；
}

点击我！
var putimage=函数（i）{
//我是图像url。
document.getElementById（“this”）.style='background:url（“+i+”）空间
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";