如何使用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 vale分配给x变量，请尝试分配实际的img元素：

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