Javascript 使用JS和按钮更改html中的背景

我写了一些JS函数，通过点击按钮来更改背景图像，然后再次点击按钮时返回到原始背景图像。下面是我的JS

    const nextBackgroundImageUrl = {
            "url('../images/pexels_bg.jpeg')": "url('/images/bbyshrk.jpg')",
            "url('../images/bbyshrk.jpg')": "url('/images/pexels_bg.jpeg')"
        }   


function changeImg() {

   const currentBackgroundUrl = document.body.style.backgroundImage;
    console.log("current bg url:" + currentBackgroundUrl);      
    document.body.style.backgroundImage = nextBackgroundImageUrl[currentBackgroundUrl];

}

在console.log中，我在“Current bg url”之后什么也没有得到，因此currentBackgroundUrl没有抓取bg图像。我是否使用了错误的样式属性来获取img？我需要网址

---

谢谢大家!

这是我的建议。您可以轻松地在CSS中交换图像，甚至可以无缝地制作不同的动画。我可以修改我的答案，按照你的方式去做，如果这是你真正想要的，但我个人觉得这将是一个更好的应用

函数更改bg（）{
document.body.classList.contains（“alt”）？document.body.classList.remove（“alt”）：document.body.classList.add（“alt”）；
}

正文{
背景图像：url（'https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350');
背景重复：无重复；
背景尺寸：封面；
过渡：所有1都容易进入；
}
body.alt{
背景图像：url（'https://images.pexels.com/photos/2265082/pexels-photo-2265082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}

---

更改BG

这是我的建议。您可以轻松地在CSS中交换图像，甚至可以无缝地制作不同的动画。我可以修改我的答案，按照你的方式去做，如果这是你真正想要的，但我个人觉得这将是一个更好的应用

函数更改bg（）{
document.body.classList.contains（“alt”）？document.body.classList.remove（“alt”）：document.body.classList.add（“alt”）；
}

正文{
背景图像：url（'https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&h=350');
背景重复：无重复；
背景尺寸：封面；
过渡：所有1都容易进入；
}
body.alt{
背景图像：url（'https://images.pexels.com/photos/2265082/pexels-photo-2265082.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
}

Change BG

关于颜色的示例（与图像几乎相同），是这样的：

const nextBackgroundImageUrl={
原文：“绿色”，
红色：“红色”，
}   
const button=document.getElementById（“更改背景”）；
按钮。addEventListener（“单击”，更改背景）；
函数changeBackground（）{
const currentColor=document.body.style.backgroundColor；
const originalColor=nextBackgroundImageUrl.original；
document.body.style.backgroundColor=currentColor==originalColor？nextBackgroundImageUrl.red:originalColor；
}

Change background

关于颜色的示例（与图像几乎相同），如下所示：

const nextBackgroundImageUrl={
原文：“绿色”，
红色：“红色”，
}   
const button=document.getElementById（“更改背景”）；
按钮。addEventListener（“单击”，更改背景）；
函数changeBackground（）{
const currentColor=document.body.style.backgroundColor；
const originalColor=nextBackgroundImageUrl.original；
document.body.style.backgroundColor=currentColor==originalColor？nextBackgroundImageUrl.red:originalColor；
}

---

Change background

这里我附加了一个解决方案，它可能有助于您满足以下条件

const nextBackgroundImageUrl={
“url（'../images/pexels_bg.jpeg'）：“url（'/images/bbyshrk.jpg'）”，
“url（'../images/bbyshrk.jpg'）：“url（'/images/pexels_bg.jpeg'）”
};
//您还可以在对象上循环-（nextBackgroundImageUrl）
const firstImg=nextBackgroundImageUrl[Object.keys（nextBackgroundImageUrl）[0]；
const secondImg=nextBackgroundImageUrl[Object.keys（nextBackgroundImageUrl）[1]；
让currentBackgroundUrl=document.body.style.backgroundImage；
constchangebgbtn=document.querySelector（'.changebg'）；
//第一次，如果找不到背景图像，则设置背景图像
函数populateGimage（）{
如果（！currentBackgroundUrl）{
currentBackgroundUrl=firstImg；
}
document.body.style.backgroundImage=currentBackgroundUrl；
}
人口基金（）；
函数更改img（）{
currentBackgroundUrl=currentBackgroundUrl==firstImg？secondImg:firstImg；
人口基金（）；
}
changeBgBtn.addEventListener（'click'，changeImg）
更改背景图像
这里我附加了一个解决方案，它可能有助于您满足以下条件


const nextBackgroundImageUrl={
“url（'../images/pexels_bg.jpeg'）：“url（'/images/bbyshrk.jpg'）”，
“url（'../images/bbyshrk.jpg'）：“url（'/images/pexels_bg.jpeg'）”
};
//您还可以在对象上循环-（nextBackgroundImageUrl）
const firstImg=nextBackgroundImageUrl[Object.keys（nextBackgroundImageUrl）[0]；
const secondImg=nextBackgroundImageUrl[Object.keys（nextBackgroundImageUrl）[1]；
让currentBackgroundUrl=document.body.style.backgroundImage；
constchangebgbtn=document.querySelector（'.changebg'）；
//第一次，如果找不到背景图像，则设置背景图像
函数populateGimage（）{
如果（！currentBackgroundUrl）{
currentBackgroundUrl=firstImg；
}
document.body.style.backgroundImage=currentBackgroundUrl；
}
人口基金（）；
函数更改img（）{
currentBackgroundUrl=currentBackgroundUrl==firstImg？secondImg:firstImg；
人口基金（）；
}
changeBgBtn.addEventListener（'click'，changeImg）
更改背景图像
您正在访问nextBackGroundImageUrl的未定义属性。没有[currentBackgroundUrl]索引。你想比较一下吗？最简单的方法是使用类来切换它。然后，您甚至可以有一个处理动画的动画。您已将nextBackgroundImageUrl声明为对象，但它应该是基于您的UECase的数组。请看，这一逻辑完全错误。您正在访问nextBackGroundImageUrl的未定义属性。没有[currentBackgroundUrl]索引。你想比较一下吗？最简单的方法是使用t类