如何使用 Javascript 通过单选按钮更改 HTML id 的背景图片

Question

我正在 on/struggling 和一些 Javascript 合作进行一个项目。目前我只有一个 index.html，它包含五个部分，每个部分都有自己的 ID，每个部分都有不同的背景图像分配给这些部分。

我在页脚中有一个按钮，单击该按钮会将这些部分的每个背景图像更改为不同的图像。

#landingImage 的当前背景图像是 DSC3719.jpg，我希望在单击单选按钮时将其更改为 DSC7317.jpg。

已经观看了小时的教程视频，对于如何将这个想法整合在一起，我没有进一步推进。我看过的最新教程建议使用 if/else，并使用替代 class 来切换背景图像。考虑到这种方法，我将不得不使用多个 classes，因为每个部分的替代图像都不同。这是正确的吗？

我不是在寻找为我编写的代码，而是在寻找解决此问题的过程。

如有任何指导，我将不胜感激！

干杯。

#landingImage{
  background-image: url(../img/DSC3719.jpg);
  min-width:100%;
  min-height: 700px;
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

 <div>
     <input class="switch" type="checkbox" value="" id="footerBtn">
     <label class="switch-btn" for="footerBtn"></label>
 </div>

Answer 1

如您在我的示例中所见，我添加了 onChange 以在每次选中复选框时使用我的函数，并简单地更改背景。

function ChangeBG(checkbox){
  const landingImage = document.getElementById('landingImage');
  if(checkbox.checked){
    landingImage.style.backgroundImage = "url('https://via.placeholder.com/150')";
  }else{
    landingImage.style.backgroundImage = "url('../img/DSC3719.jpg')";
  }
}

#landingImage{
  background-image: url(../img/DSC3719.jpg);
  min-width:100%;
  min-height: 700px;
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

<div>
     <input class="switch" type="checkbox" value="" id="footerBtn" onChange="ChangeBG(this);">
     <label class="switch-btn" for="footerBtn"></label>
 </div>
 
 
 <div id="landingImage"></div>

Answer 2

您可以通过 CSS 使用 :checked 伪 class 和兄弟组合器来做到这一点。

#landingImage{
  background-image: url("https://via.placeholder.com/150/0000FF/808080");
  min-width:100%;
  min-height: 700px;
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.switch:checked ~ #landingImage {
  background-image: url("https://via.placeholder.com/150/FF0000/FFFFFF");
}

<div>
    <input class="switch" type="checkbox" value="" id="footerBtn">
    <label class="switch-btn" for="footerBtn"></label>
    
    <div id="landingImage"></div>
 </div>

如评论所述，CSS 解决方案可能会因为要更改多个图像而变得麻烦。

要在 javascript 中实现这一点，您可以将预期的备用图像 src 存储在 HTML 的 data 属性中，然后在复选框更改时迭代相关元素。

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().

Using data attributes

function toggleImages() {
  // get all elements with class 'alt-image'
  const altImages = document.querySelectorAll('.alt-image');
  // iterate over the resulting NodeList
  altImages.forEach(image => {
    // check if the image has been switched
    if (!image.classList.contains('alt-active')) {
      // if not, get the alt-src from the data attribute
      const altsrc = image.getAttribute('data-alt-src');
      // set the alt url on the element
      image.style.backgroundImage = `url("${altsrc}")`;
      // add a class indicating it has been toggled
      image.classList.add('alt-active');
    } else {
      // if so, set the url to '' (the src specified in the CSS will be used)
      image.style.backgroundImage = '';
      // remove the active class
      image.classList.remove('alt-active');
    }
  });
}

// query the document for the toggle switch
const toggle = document.querySelector('.switch');

// add onchange listener to the toggle
toggle.addEventListener('change', toggleImages, false);

.container {
  display: flex;
  justify-content: space-between;
}
.alt-image {
  height: 40vh;
  width: 20vw;
  padding: 16px;
  position:relative;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

#landing1{
  background-image: url("https://via.placeholder.com/150/000F0F");
}
 #landing2{
  background-image: url("https://via.placeholder.com/150/FFFF00");
}
#landing3{
  background-image: url("https://via.placeholder.com/150/FF00F8");
}
#landing4{
  background-image: url("https://via.placeholder.com/150/808080");
}

<div class="container">
<div id="landing1" class="alt-image" data-alt-src="https://via.placeholder.com/150/0000FF"></div>
<div id="landing2" class="alt-image" data-alt-src="https://via.placeholder.com/150/FF0000"></div>
<div id="landing3" class="alt-image" data-alt-src="https://via.placeholder.com/150/FFFF00"></div>
<div id="landing4" class="alt-image" data-alt-src="https://via.placeholder.com/150/000000"></div>
</div>
<div>
    <input class="switch" type="checkbox" value="" id="footerBtn">
    <label class="switch-btn" for="footerBtn"></label>
 </div>

Answer 3

缺少的步骤可能是：

您需要将事件处理程序绑定到复选框。 onclick 事件非常简单：https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp
您需要更改背景图片：change background image in body（第一个答案使用 jQuery，向下滚动查看 vanilla JS）

Answer 4

...contains five sections, each with their own id, and each with a different background-image allocated to these sections.
I have a button in the footer, which when clicked, should change each of these section background-images to a different image.

切换类怎么样？

这是更改多张图片的方法

在这种特殊情况下，图像都在 CSS 中定义。可以使用 data-attributes，但在这种情况下，我更愿意将所有图片 URL 放在一个地方

请注意，我破坏了 querySelectorAll，因为并非所有较新的浏览器都支持 html 集合中的 forEach

document.getElementById("footerBtn").addEventListener("click",function() {
  [...document.querySelectorAll(".coverImage")]
    .forEach(img => img.classList.toggle("checked",this.checked))
})

.coverImage {
  min-width: 100%;
  min-height: 700px;
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#landingImage {
  background-image: url(https://via.placeholder.com/700?text=landing1.jpg);
}
#landingImage.checked {
  background-image: url(https://via.placeholder.com/700?text=landing2.jpg);
}

#otherImage {
  background-image: url(https://via.placeholder.com/700?text=other1.jpg);
}
#otherImage.checked {
  background-image: url(https://via.placeholder.com/700?text=other2.jpg);
}

<div>
  <input class="switch" type="checkbox" value="" id="footerBtn">
  <label class="switch-btn" for="footerBtn"></label>
</div>

<div id="landingImage" class="coverImage"></div>
<div id="otherImage" class="coverImage"></div>

如何使用 Javascript 通过单选按钮更改 HTML id 的背景图片

How can I change the background image of an HTML id, via a radio button, using Javascript

javascript

css

background-image

radio-button