Question

<picture class="pic_test">
  <source media="(min-width:450px)" srcset="1190.jpg">
  <source media="(min-width:900px)" srcset="120.jpg">
  <img src="new.jpg" alt="Flowers" style="width:auto;">
</picture>

我想检查源媒体属性是否为450px，根据结果，我必须更改srscet属性。

先谢谢

Answer 1

你的意思是

var $pic = $("picture"), $source=$pic.find("source"), media=$source.attr("media");
if (media.indexOf("450px")!=-1) $source.attr("srcset","small.jpg");

如果您需要特定来源：

$("picture").find("source").each(function() {
  if ($(this).attr("media").indexOf("450px")!=-1) {
    $(this).attr("srcset","small.jpg");
  }
});

或直接使用attr：

$('[media="(min-width:450px)"]').attr("srcset","small.jpg");

你可能不得不逃避一些 - 或：

Answer 2

您可以使用javascript Image并获取其宽度：

var image = new Image();
image.src = $("source#id??").attr("srcset");
image.onload = function() {
    var width = image.width;
    if(width == 450){
        //do stuff
    } else {
       //do other stuff
    }
}

Answer 3

您只需使用 jQuery attribute selector 选择器并更改srcset属性，如下所示：

$('[media^="(min-width:450px)"]').attr('srcset' , 'newSrcSet.jpg')

这样可以比$("source:eq(0)")更好地为您提供服务，只需更改源属性更改的顺序。

更改图片标记中的srcset属性值

3 个答案: