Question

我正在尝试根据窗口的宽度调整背景图像的大小。我一直在测试这个，当我'检查元素'并改变宽度大小时，我可以获得以chrome显示的警报，并且警报会显示出来。但我无法改变图像的类别。

有什么想法吗？

这是我的basefunctions.js文件

after_initialize

这是我的HTML / CSS

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

Answer 1

您应该使用className而不是setAttribute。

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

Here is another SO关于更改dom对象的课程。

我还整理了jsfiddle来演示。

Answer 2

您可以使用

设置课程

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

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

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

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

2 个答案: