如何使用 javascript 在单击时更改图片 srcset 属性

Question

我正在尝试使用 javascript 在单击时更改图片元素的 srcset 属性。当有人单击按钮时，我想将图像更改为另一个基于 webp 的图像。

我可以使用 var x = document.getElementById("category-banner").srcset;

输出图像的完整路径，所以我认为这只是使用以下设置的情况：

x.srcset="images/products/product-clamp.webp";

它似乎什么也没做，控制台没有错误，图像没有改变，html 中的值似乎也没有改变。我也尝试过使用 src 无济于事。

这里是html

    var x = document.getElementById("category-banner").srcset;
    var myFunction = function() {
        x.srcset="images/products/product-clamp.webp";
}

 <picture>
        <source srcset="images/banners/categories/webp/970mm-Balustrade-Panels.webp" type="image/webp" alt="Polaris Hinges now available" id="category-banner">
        <source srcset="images/banners/categories/webp/970mm-Balustrade-Panels.png" type="image/jpeg" alt="Polaris Hinges now available" class="category-banner">
        <img src="images/banners/categories/webp/970mm-Balustrade-Panels.png" alt="Polaris Hinges now available" class="category-banner">
     </picture>

<button onclick="myFunction()">Change Image</button>

和js代码：

Answer 1

您正在将 srcset 值分配给 x 变量，请尝试分配实际的 img 元素：

var img = document.getElementById("category-banner");
    var myFunction = function() {
        img.srcset="images/products/product-clamp.webp";
}

如何使用 javascript 在单击时更改图片 srcset 属性

How to change picture srcset property on click using javascript

html

javascript

image

webp