Javascript 如何在选择匹配的响应图像文件时替换div的背景图像？

我有一个网站，有一个

div

的响应性背景图像

我通过

@media

查询选择图像的大小

代码中有问题的div具有id

banner div

HTML: 问题: 如果我现在想交换/替换图像，例如在多个不同的图像之间有一个不断变化的背景图像，我将如何做到这一点，同时尊重给定分辨率的正确图像

假设我在

images

文件夹中有以下图像：

• background-1-small.png
• background-1-medium.png
• background-1-big.png
• background-2-small.png
• background-2-medium.png
• background-2-big.png

我知道如何用JavaScript替换当前图像的路径，但我

---

找不到替换所有

@media

查询的方法。

您可以使用matchMedia。 我会这样做： -每个图像容器都将其响应变量设置为数据属性，以便我们可以在javascript中为每个断点访问它们：

var$elements=$（“.element”）；
var mqls=[//window.matchMedia（）查询列表
window.matchMedia（（最小宽度：860px）），
window.matchMedia（（最大宽度：600px）），
window.matchMedia（（最大宽度：500px））
]
对于（var i=0；我不理解它。
document.getElementById（“match1”）
找到了什么？为什么要用HTML编写它？而且，如果不更改窗口大小，就永远不会替换图像，这就是问题所在。因此，您的建议是使用
matchmedia（…）完全用JavaScript进行媒体查询
，听起来不错。因此我可以创建一个保存当前文件url的全局变量，并切换该变量，根据您的想法可以计算出正确的大小。由于您使用了
mediaqueryresponse（mql）
两次，这让人感到困惑。要更改到另一个图像，我只需调用
setBackground（…）
每隔几秒钟使用一个新索引调用一次函数。因此，现在它将在旋转木马中以及文档大小更改时被调用。感谢对
matchMedia（…）
的提示。很抱歉，getElementById是另一个脚本的遗留项。理论上，没有必要每隔几秒钟调用一次函数“mqls[i]。addListener（mediaqueryresponse）part意味着每次计算新断点时都会调用mediaqueryresponse函数。在这里，我检查断点是什么，并调用一个函数来设置背景。在该函数中，您可以循环遍历所有元素并相应地设置背景。我更新了我的剪报，以显示它如何处理多个元素并添加了一个到JSFIDLE的链接来测试它的响应能力。PS：很抱歉给您带来了困惑
<div id="header-div">
    <div id="background-clipped-div">
        <div id="banner-div">
            <div id="scroll-down-div" onclick="scrollToMainContent()">
                <i class="fas fa-angle-down"></i>
            </div>
        </div>
    </div>
</div>

@media only screen and (max-width: 480px) {
    #banner-div {
        background-image: url(images/background-1-small.png);
    }
}

@media only screen and (max-width: 768px) {
    #banner-div {
        background-image: url(images/background-1-medium.png);
    }
}

@media only screen {
    #banner-div {
        background-image: url(images/background-1-big.png);
    }
}