изменить фон в соответствии с предпочтением пользователя

Question

Привет, я хотел бы иметь как 5 фонов на выбор, так и пользователь может просто щелкнуть по квадрату с миниатюрами каждого, и сайт будет динамически менять фон. Как мне это сделать? спасибо за любую помощь.

Answer 1

Это очень просто, возможно, вам нужно сначала узнать о html и javascript. Прежде всего, необходимо подготовить HTML структуру, как это:

<div class="box" data-bg="img1.jpg"></div> 
<div class="box" data-bg="img2.jpg"></div> 
<div class="box" data-bg="img3.jpg"></div> 
<div class="box" data-bg="img4.jpg"></div> 
<div class="box" data-bg="img5.jpg"></div> 

CSS-пример, чтобы сделать это работает:

.box { 
    width: 50px; 
    height: 50px; 
    border: 1px solid black; 
    background-color:blue; 
} 

Javascript

var elements = document.getElementsByClassName("box"); // get all elements 
for(var i in elements) { // loop through them 
    elements[i].click(function(e) { // handle click 
      document.getElementsByTagName("body")[0].style.backgroundImage = this.dataset().bg; //change background 
    }); 
}