如何根据窗口宽度使用JavaScript更改图像元素类？

我试图根据窗口的宽度调整背景图像的大小。我已经对此进行了测试，当我“检查元素”并更改宽度大小时，我可以在chrome中显示警报，并且警报会按应有的方式显示。但我无法改变图像的类别

有什么想法吗

这是我的basefunctions.js文件

window.onload = function changeClass(){
    if( window.innerWidth < 770 ) {
      document.getElementById("bg_img").setAttribute("class", "imgMobile");
      alert("On Mobile");
    }else{
      alert("Not on Mobile");
    }
}

window.onload=函数changeClass（）{
如果（窗内宽度<770）{
document.getElementById（“bg_img”）.setAttribute（“class”、“imgMobile”）；
警报（“移动”）；
}否则{
警报（“不在手机上”）；
}
}

这是我的HTML/CSS

<script language="JavaScript" type="text/javascript" src="js/basefunctions.js"></script>

<style>

#bg_img {
    width: 100%;
    z-index: 1;
    border: 1px #000 solid;
    height:80%;
}

.imgMobile {
    display: none;
    width: 100%;
    z-index: 1;
    margin-left: -100;
}

</style>

<img src="img/gavel.png" alt="" id="bg_img" class="">

#bg_img{
宽度：100%；
z指数：1；
边框：1px#000实心；
身高：80%；
}
伊姆格莫比尔先生{
显示：无；
宽度：100%；
z指数：1；
左边距：-100；
}

您应该使用

className

而不是

setAttribute

document.getElementById("bg_img").className = "imgMobile";

关于更改dom对象的类

---

我还放了一个示例来演示。

您可以使用

document.getElementById("bg_img").className = "imgMobile";

如果要在不重写其他类的情况下添加该类，请使用

document.getElementById("bg_img").className += " imgMobile";

---

是的，我也试过了，不知道为什么不行。我将其设置为显示：无，边距更改只是为了验证它是否正常工作，但图像根本没有更改。