根据用户偏好更改背景

时间:2015-09-01 08:33:01

标签: html css html5 css3

您好我想要5个背景可供选择,用户只需点击一个包含每个缩略图的框,该网站将动态更改背景。我该怎么做?谢谢你的帮助。

1 个答案:

答案 0 :(得分:3)

这很简单,也许你需要先学习一下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
     });
 }