jquery - 如何根据屏幕尺寸更改内联背景图片？

Question

是否可以更改内联背景图片，以便如果屏幕尺寸的宽度降至 767 像素，背景 URL 会更改。

我现在有以下代码:

<section class="inner-header" style="background:url(/images/sports-glasses.jpg) no-repeat center top;">

我知道我可以为此部分设置一个类或 ID 并改用 CSS，然后使用@media 查询来更改图像，但为了快速起见，我想知道是否有一种内联更改它的方法？

Answer 1

有一种方法可以使用 javascript 更改内联样式

$(window).on('resize', function() {
    if ( $(this).width < 767 ) {
        $('.inner-header').css('background', 'url(/images/other.jpg) no-repeat center top');
    } else {
        $('.inner-header').css('background', 'url(/images/sports-glasses.jpg) no-repeat center top');
    }
});