使用Javascript更改背景图像 [英] Changing background image using Javascript

问题描述

我一直在尝试在我创建的其中一个网页上创建幻灯片。我创建了一个具有唯一类名的div，目标是使用JavaScript更改背景图像。到目前为止，我已经能够执行以下操作：

I have been trying to create a slideshow on one of the web pages I've been creating. I have created a div with a unique class name that is targeted in order to change the background image using JavaScript. So far, I have been able to do the following:

1. 使用querySelector <捕获我想要更改背景图像的div / li>
   
2. 尝试使用JavaScript更改所述div的背景图像

我一直在调试此功能使用DevTools，但我无法弄清楚为什么图像不会改变。知道这里发生了什么吗？我已经包含了以下代码的片段。谢谢。

I have been debugging this function using DevTools, yet I cannot figure out why the image won't change. Any idea what is happening here? I have included snippets of the code below. Thank you.

HTML

<div class="content-one-right">
  <div class="inner-content-one-right">
    <div class="slideshow-container">
      <a class="prev" onclick="transitionSlides(-1)">&#10094;</a>
      <a class="next" onclick="transitionSlides(1)">&#10095;</a>
    </div>
  </div>
</div>

CSS

.content-one-right {
  grid-column: col-start 7 / span 6;
  height: 60vh;
}

.inner-content-one-right {
    height: 90%;
    width: 90%;
}

.slideshow-container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('../images/home-slideshow/home1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.prev, .next {
    cursor: pointer;
    color: #FFF;
    font-weight: bold;
    font-size: 1em;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

JavaScript

JavaScript

var slideshowIndex = 0;

function transitionSlides(n) {

  var images = ["home1", "home2", "home3", "home4", "home5", "home6"];
  slideshowIndex += n;

  if(slideshowIndex < 0) {
    slideshowIndex = images.length-1;
  }
  else if (slideshowIndex >= images.length) {
    slideshowIndex = 0;
  }

  var getContainer = document.getElementsByClassName('slideshow-container')[0];
  var imageToChange = "url('../images/home-slideshow/" + images[slideshowIndex] + ".jpg')";

  getContainer.style.backgroundImage = imageToChange;

}

推荐答案

我认为问题在于您如何尝试更改背景图像。第一次设置它时，您将在样式表中进行设置。您在那里使用CSS属性。

I think the problem is in how you are trying to change the background image. The first time you set it, you are setting it in the stylesheet. You are using a CSS property there.

稍后，您尝试使用 .style 属性更改它元件。这些都不是一回事。来自此页：

Later, you try to change it using the .style property of the element. These aren't the same thing. From this page:

样式属性对于完全了解元素上应用的
样式没有用，因为它只代表CSS
声明集元素的内联样式属性，而不是来自其他地方样式规则的
，例如
部分中的样式规则或外部样式表。

The style property is not useful for completely learning about the styles applied on the element, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the section, or external style sheets.

为了澄清，请在此页面的控制台中尝试： document.querySelectorAll（'input [type =submit]'）[3] .style

To clarify, try this in your console on this very page: document.querySelectorAll('input[type="submit"]')[3].style

这会抓住页面底部显示发布你的答案的蓝色按钮。它显然有一个在CSS中设置的蓝色背景。但是控制台中的CSSDeclaration对象只有空值。那是因为它只反映了内嵌样式，而不是你用CSS应用的样式。

This grabs the blue button at the bottom of the page that says "Post Your Answer". It's pretty clearly got a blue background that is set in the CSS. But that CSSDeclaration object in your console has only empty values. That's because it only reflects the inline styles, not the styles you applied with CSS.

好玩，对吗？有了这些知识，我认为您可以选择其中一种方式使幻灯片以您期望的方式发生。但是，根本不使用背景图像可能是最容易的。我认为在那里有一个 img 标签是常规的，并使用javascript设置 src 属性。

Fun, right? With that knowledge, I think you can choose one way or the other to make your slideshow happen the way you expect. It's probably easiest to not use background image at all, though. I think it's conventional to have an img tag there and use javascript to set the src attribute.

这篇关于使用Javascript更改背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！