javascript - 使用 JQuery 设置背景图像 ID

Question

我想根据用户设备的大小设置不同的背景。我已经使用 JQuery 设置了背景图像，没问题。现在我需要设置背景图像的 ID，但我似乎无法弄清楚。 我需要为下面的另一个脚本将 ID 设置为 bg。

请帮忙!

谢谢

var theDiv = document.getElementById("body");
 if (screen.width <= 1300) {
    $('body').css('background-image', 'url(images/jpg/SmallLeather.jpg)');}
else{
    $('body').css('background-image', 'url(images/jpg/BackGroundCon.jpg)');
    $('body').css('background-image', 'id (bg)');}
</script>  
<script>
$(window).load(function() {    
    var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();
function resizeBg() {
    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }
}
theWindow.resize(resizeBg).trigger("resize");
});
</script>

Answer 1

背景图片没有自己的 ID。设置为背景的对象可以具有 id。然后，您可以通过找到具有该 ID 的宿主对象然后在该对象上设置背景图像来获取背景图像。

如果所讨论的对象是正文，那么您实际上不需要 id 来检索该对象，因为您可以随时将其称为 document.body。在 javascript 中有对该对象的内置访问。

此外，您可以使用 CSS media queries 完全使用 CSS(无 javascript)根据窗口大小动态调整背景图像。 .