JavaScript單擊更改背景影像？-有解無憂

我正在嘗試使用一些基本的 JS 函式來更改我的 HTML 檔案中正文的背景。我已經將該函式設定為針對特定 ID，然后是 style.background 標簽，如果是當前背景影像，則將其設定為我指定的另一個，否則保持相同的影像。我現在已經無數次嘗試更改代碼，但似乎仍然無法更改背景。對此的任何幫助將不勝感激。

HTML：

<div class="bg-image" 
     style="background-image: url('./img/frankie.jpg');
            height: 100vh" id="bacgr"> <!--SETS BACKGROUND using id tag to change w/ JS-->
        <main role="main" class="container d-flex justify-content-center">

          <div class="starter-template">
            <h1>Bootstrap starter template</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
          </div>

        </main>
    </div>

JS：

let myImage = document.getElementById('bacgr').style.backgroundImage; //have to target specific image(like an array ([0])), put inside div w/ id.

myImage.onclick = function() {
    if(myImage === "url('./img/frankie.jpg')") {
      myImage == "url('./img/jesus_mobile.jpg')";
    } else {
      myImage == "url('./img/frankie.jpg')";
    }
}

uj5u.com熱心網友回復：

試試這個：

const el = document.getElementById('bacgr');
el.onclick = function() {
  if(this.style.backgroundImage === "url('./img/frankie.jpg')") {
    this.style.backgroundImage = "url('./img/jesus_mobile.jpg')";
  } else {
    this.style.backgroundImage = "url('./img/frankie.jpg')";
  }
}

這是示例

uj5u.com熱心網友回復：

您僅更改 URL，但不會將其分配回 dom 元素。

const el = document.getElementById('bacgr');
let prev = 'url("https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa")';
el.onclick = function() {
  el.style.backgroundImage = prev === el.style.backgroundImage ? 'url("https://images.unsplash.com/photo-1583508915901-b5f84c1dcde1")' : prev;
}

<div class="bg-image" style="background-image: url('https://images.unsplash.com/photo-1570215171323-4ec328f3f5fa');
            height: 100vh" id="bacgr">
  <main role="main" class="container d-flex justify-content-center">
    <div class="starter-template">
      <h1>Bootstrap starter template</h1>
      <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>

  </main>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/409524.html

標籤：

上一篇：CommonJS'require'是否仍在使用或棄用？

下一篇：動態映射的無線電組出錯