尝试使用javascript切换divs onclick

我正在制作一张虚拟名片，但我的javascript代码不起作用。我试着这样做，当你点击按钮时，卡会切换到另一个div（卡的背面），但代码不起作用。这是我的密码：

var cardFront=document.getElementsByClassName（“CardBackground”）；
var cardBack=document.getElementsByClassName（“CardBackground2”）；
函数前（）{
cardFront.style.display=“块”；
}
函数frontOff（）{
cardFront.style.display=“无”；
}
函数back（）{
cardBack.style.display=“块”；
}
函数退避（）{
cardBack.style.display=“无”；
}
函数翻转（）{
if（cardFront.style.display==“块”）{
cardFront.style.display=“无”；
}
}

.cardbundground{
背景：rgb（45,45,45）；/*旧浏览器*/
背景：-moz线性梯度（顶部，rgba（45,45,45,1）0%，rgba（0,0,0,1）100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，rgba（45,45,45,1）0%，rgba（0,0,0,1）100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（至底部，rgba（45,45,45,1）0%，rgba（0,0,0,1）100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#2d2d2d'，endColorstr='#000000'，GradientType=0）；/*IE6-9*/
边框：1px白色固体；
位置：绝对位置；
宽度：60%；
身高：80%；
左：20%；
排名前10%；
边界半径：20px 20px 20px 20px；
溢出y：自动；
显示：块；
}
.CardBackground2{
背景：rgb（45,45,45）；/*旧浏览器*/
背景：-moz线性梯度（顶部，rgba（45,45,45,1）0%，rgba（0,0,0,1）100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，rgba（45,45,45,1）0%，rgba（0,0,0,1）100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（至底部，rgba（45,45,45,1）0%，rgba（0,0,0,1）100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#2d2d2d'，endColorstr='#000000'，GradientType=0）；/*IE6-9*/
边框：1px白色固体；
位置：绝对位置；
宽度：60%；
身高：80%；
左：20%；
排名前10%；
边界半径：20px 20px 20px 20px；
溢出y：自动；
显示：无；
z指数：2；
}

---

document.getElementsByClassName返回一个数组（nodeList），因此，由于每个类只有一个子元素，因此替换为：

var cardFront = document.getElementsByClassName("CardBackground");
var cardBack = document.getElementsByClassName("CardBackground2");

与

---

应该可以做到这一点。

GetElementsByCassName（）

返回一个数组。您需要指定要访问的数组中的哪个元素的

样式。display

。解释这可以解决问题的原因，以便OP能够更好地理解为什么需要进行此替换（即getElementsByClassName返回元素数组，因此需要对第一个元素进行索引）编辑，感谢AP的指导。

var cardFront = document.getElementsByClassName("CardBackground")[0];
var cardBack = document.getElementsByClassName("CardBackground2")[0];