javascript - 使用 JavaScript 更改背景

Question

我正在尝试根据屏幕宽度更改元素的背景。但是，我似乎无法让它工作。这是我的 css 文件中的内容:

.landscape {
    background-image:url(../images/thumb-1920-559128.jpg);
    min-height:100%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;}

这是我的脚本。

if (container_width>mobSwitch)  {
    bg.attr("class","landscape");}

当我的 css 只有 fill: #333333; 时，它工作正常。现在它才开始让我生气。请帮忙。

我已经把它推送到 git 上了。 https://github.com/faizaakhtar/interactive

查看 iframe.html

Answer 1

您可以在不使用 JavaScript 的情况下使用 CSS 媒体查询来实现这一目标。

HTML:

<div class="landscape">
  <!-- Your DIV content here. -->
</div>

CSS:

@media (min-width: 480px) { // Assuming mobWidth = 480px
   .landscape {
       background-image: url('../images/thumb-1920-559128.jpg');
       // Other styles.
   }
}

.landscape {
    background-image: none // Or an image.
    // Other styles.
}