javascript - 删除一定宽度的背景图片

Question

我试图在每次加载页面时更改我的背景图像。该功能工作正常，但我还希望在移动用户的屏幕宽度小于 640px 时将背景图像设置为无。我尝试使用 screen.width 和 screen.availWidth，但两者都没有做。无论屏幕尺寸如何，我的背景图像都会保留。

function changeImg(imgNumber)   {
    var myImages = ["images/bg_images/audi_tt.jpg", "images/bg_images/watercooled.jpg", "images/bg_images/aircooled.jpg"];
    var imgShown = document.body.style.backgroundImage;
    var newImgNumber =Math.floor(Math.random()*myImages.length);
    var windowWidth = window.screen.availWidth;
    if (windowWidth <= 640) {
        document.body.style.backgroundImage = 'none';
    } else if (windowWidth > 640) {
        document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
    }
}
window.onload=changeImg;

Answer 1

您可以通过这种方式使用 jQuery 来完成这一切:

function changeImg(imgNumber)   {
    var myImages = ["images/bg_images/audi_tt.jpg", "images/bg_images/watercooled.jpg", "images/bg_images/aircooled.jpg"];
    var newImgNumber =Math.floor(Math.random()*myImages.length);
    var windowWidth = $(window).width();
    if (windowWidth <= 640) {
        $('body').css('background-image', 'none');
    } else if (windowWidth > 640) {
        $('body').css('background-image', 'url('+myImages[newImgNumber]+')');
    }
}
$(window).load(changeImg());