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）基于窗口大小动态调整背景图像。

Answer 2

使用 attr() 将正文的id属性设置为bg。

$('body').attr('id', 'bg');

Answer 3

您无法设置背景图片ID，因为它没有。我建议使用.addClass()添加所需的ID（现在是一个类），或者如果正文还没有ID，请使用.attr("id", "bg")设置body标记的ID 。然后通过.css("background-image")获取背景图片。

更新：似乎你想调整背景图片的大小。如果是，请考虑在css中使用background-size: cover或contain。如果您正在使用它，请使用其中一个答案中提到的媒体查询

Answer 4

var id = $('body').attr('id');
$("#"+id).css('background-image', 'url(BackGroundCon.jpg)');

Answer 5

这是我提出的解决方案......

<img src="images/jpg/BackGroundCon.jpg" id="bg" alt=""> 
<script type="text/javascript">
var theDiv = document.getElementById("body");
if (screen.width <= 1300) {
var img= 'images/jpg/SmallLeather.jpg';
$('#bg').attr("src",img); 
 }

</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>

至少在目前，这是在行动中。 http://heretomeet.com

StackExchange不允许我接受多个回复，这很遗憾，因为很多人在凌晨2点都有非常有用的评论！你什么时候睡觉？

由于

唐

使用JQuery设置背景图像ID

5 个答案: