javascript - 如何使用jQuery更改媒体查询CSS

我有两个背景图片，我想用jQuery更改它。

对于#banner，它可以工作，但我现在不介绍如何为@media screen and (max-width: 1024px)编写代码

.banner {
  background: url(../images/640px.jpg) 0px 0px no-repeat;
}

@media screen and (max-width: 1024px) {
  .banner {
    background: url(../images/900px.jpg) 0px 0px no-repeat;
  }
}

var selectData = {

  "bmw": {

    "1": "316i",
    "100": "520i",
    "101": "740i",
    "image1": "images/640px.jpg",
    "image2": "images/900px.jpg",

  },

};

jQuery(document).ready(function($) {
  $(document).on('click', '.specialLink', function(event) {
    var radio2 = document.getElementById('radio2');
    if (radio2.checked == false) {
      radio2.checked = true;
      toggleRadio();
    }
    $(".regio").html($(this).text());
    event.preventDefault();
    var b = $(this),
      background_image = '';
    buttonId = b.attr('id'),
      selectSet = selectData[buttonId],
      selectField = $('#specialLink');
    selectField.empty();
    //To change the background image of website
    $("#banner").css('background-image', 'url("' + selectSet.image1 + '")');
    $("@media screen and (max-width: 1024px)").css('background-image', 'url("' + selectSet.image2 + '")');
    if (selectSet) {
      //Remove image index form selectSet
      $.each(selectSet, function(k, v) {
        if (typeof k === 'string' && k === 'image') {
          return true;
        }
        selectField.append($('<option>', {
          value: k,
          text: v
        }));
      });
    }
    return false;
  });
});

最佳答案

您可以使用jQuery (window).resize()函数，该函数将在调整浏览器窗口大小时触发。


  这是一个使用jQuery，javascript和css处理调整大小事件的示例。
  （如果您只是通过调整大小来设置样式（媒体查询），则最好的方法是CSS）
  http://jsfiddle.net/CoryDanielson/LAF4G/


将此代码用于所需的解决方案。

$(window).resize(function(){
    if ($(window).width() <= 1024){
        $('.banner').css('background-image', 'url(' + imageUrl + ')');
    }
});

希望这对您有所帮助。

关于javascript - 如何使用jQuery更改媒体查询CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55312285/