如何使用jQuery或CSS获取picture标签中的当前激活图片？

先贴出你提供的HTML结构：

<picture>
    <source media="(min-width: 992px)" srcset="/images/xxxxxxxxxx.jpg">
    <source media="(min-width: 768px)" srcset="/images/yyyyyyyyyy.jpg">
    <img src="/images/zzzzzzzzzz.jpg">
</picture>

一、用jQuery实现 #

方法1：直接获取当前显示的图片地址 #

浏览器会自动根据<source>的媒体条件，把匹配的图片加载到<img>标签上，直接读取currentSrc属性就能拿到当前激活的图片地址：

// 获取当前显示的图片URL
const activeImgUrl = $('picture img')[0].currentSrc;
console.log(activeImgUrl);

方法2：找到对应的<source>标签 #

遍历所有<source>，通过媒体查询匹配判断哪个是当前激活的：

$('picture source').each(function() {
    const mediaQuery = $(this).attr('media');
    if (window.matchMedia(mediaQuery).matches) {
        console.log('当前激活的source标签:', this);
        console.log('对应图片地址:', $(this).attr('srcset'));
    }
});

二、用CSS实现 #

CSS没法直接“获取”元素，但可以针对当前激活的状态设置样式，直观区分当前生效的图片：

/* 屏幕≥992px时，给当前显示的img加样式 */
@media (min-width: 992px) {
    picture img {
        border: 2px solid red;
    }
}

/* 屏幕≥768px且<992px时 */
@media (min-width: 768px) and (max-width: 991px) {
    picture img {
        border: 2px solid blue;
    }
}

/* 屏幕<768px时（加载默认img） */
@media (max-width: 767px) {
    picture img {
        border: 2px solid green;
    }
}

如果你的浏览器支持:has选择器（现代浏览器基本都支持），还可以直接给匹配的<source>标记样式（用于调试）：

@media (min-width: 992px) {
    picture:has(source[media="(min-width: 992px)"]) source[media="(min-width: 992px)"] {
        outline: 2px solid purple;
    }
}

内容的提问来源于stack exchange，提问作者Leonardo