通过javascript以样式保存新图像src

Question

所以我正在尝试做一个标题图像改变器，比如当你点击一个图像来改变标题的样式，并在重新加载后保存它。例如：我有一个默认的图像使用一个样式在头部，当我按下按钮改变它，自动保存它，即使在刷新。

null

function changetoimg1() {
  document.getElementById("header").style.background = "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)";
}

function changetoimg2() {
  document.getElementById("header").style.background = "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)";
}

function changetoimg3() {
  document.getElementById("header").style.background = "url(https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg)";
}

.test{
    background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
    border: 0;
    padding: 37px;
    background-size: cover;
    padding-left: 70px;
}

.test2{
    background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
    border: 0;
   padding: 37px;
    background-size: cover;
    padding-left: 70px;
}

.test3{
    background: url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg');
    border: 0;
    padding: 37px;
    background-size: cover;
    padding-left: 70px;
}

.imageshdr{
    position: absolute;
    margin-top: -245px;
    display: inline-block;
    width: 500px;
    margin-left: 191%;
}

<header id="header" style="background-image: url('https://i.imgur.com/oKe8JBR.png');">
<div class="imageshdr"><button onclick="changetoimg1()" class="test"></button>
<button onclick="changetoimg2()" class="test2"></button>
<button onclick="changetoimg3()" class="test3"></button></div>

null

Answer 1

使用事件侦听器是一个更好的实践。使用sessionStorage在重新加载时保持当前状态；如果您希望在浏览器关闭时保留本地存储，则可以使用本地存储。

null

document.addEventListener("DOMContentLoaded", function(){
  // charge the image on load
  changeimage(false);
  // add the click action on each button
  document.querySelectorAll('.imageshdr button').addEventListener('click', function() { 
    changeimage(true);
  });
});

function changeimage(next) {
  var i = 0;
  // retrieve the current index if stored
  if(sessionStorage.getItem('myheader') != null) i = sessionStorage.getItem('myheader');
  // go on next if requested
  if(next) i+=1;
  // max i = 3
  i=i%3;
  sessionStorage.setItem('myheader',i);
  // here change your background from an array of images
}

<header id="header">
<div class="imageshdr">
<button class="test"></button>
<button class="test2"></button>
<button class="test3"></button>
</div>

Answer 2

我认为您不需要重复代码，也没有为#header赋予属性

这个答案是基于我对你问题的理解。

null

js prettyprint-override">window.onload=()=>{
  let image=localStorage.getItem("dataImage");
  document.getElementById("header").style.backgroundImage=`url('${image}')`;
}
function changetoimg() {
  document.getElementById("header").style.backgroundImage = "url('https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg')";
  localStorage.setItem("dataImage","https://i.pinimg.com/originals/a0/df/19/a0df19b8781bca3f2356013600131728.jpg")
}