Native JavaScript to achieve skinning

The specific code for implementing skinning with native JavaScript is for your reference. The specific content is as follows

principle

Through the click event, get the information of the clicked image and change the path of the HTML background image

CSS Styles

<style>
 body{
 margin:0;
 padding:0;
 background:url(img/1.jpg) no-repeat;
 background-size:100% 100%;
 }
 #box{
 width:100%;
 height:130px;
 background:#999999;
 }
 #box ul{
 margin:0;
 padding:0;
 list-style:none;
 }
 #box ul li li,#box ul li img{
 width:180px;
 height:120px;
 float:left;
 margin:5px 60px;
 }
</style>

HTML source code

<body id="Body">

 <div id="box">
 <ul>
 <li><img src="img/1.jpg" /></li>
 <li><img src="img/2.jpg" /></li>
 <li><img src="img/3.jpg" /></li>
 <li><img src="img/4.jpg" /></li>
 <li><img src="img/5.jpg" /></li>
 </ul>
 </div>

</body>

JavaScript source code

<script>

 var oBody = document.getElementById('Body');
 var oImg = document.getElementsByTagName('img');
 
 for(var i=0;i<oImg.length;i++)
 {
 
 var oImgA=oImg[i];
 oImgA.index=i+1;
 
 oImgA.onclick=function(){
 
 //console.log(this);
 oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';
 oBody.style.backgroundSize = '100% 100%'; 
 
 };
 
 }
</script>

Rendering

Click to switch

Source code

<!DOCTYPE>
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Skin Change</title>
 <style>
 body{
 margin:0;
 padding:0;
 background:url(img/1.jpg) no-repeat;
 background-size:100% 100%;
 }
 #box{
 width:100%;
 height:130px;
 background:#999999;
 }
 #box ul{
 margin:0;
 padding:0;
 list-style:none;
 }
 #box ul li li,#box ul li img{
 width:180px;
 height:120px;
 float:left;
 margin:5px 60px;
 }
 </style>
</head>
<body id="Body">

 <div id="box">
 <ul>
 <li><img src="img/1.jpg" /></li>
 <li><img src="img/2.jpg" /></li>
 <li><img src="img/3.jpg" /></li>
 <li><img src="img/4.jpg" /></li>
 <li><img src="img/5.jpg" /></li>
 </ul>
 </div>

</body>
</html>


<script>

 var oBody = document.getElementById('Body');
 var oImg = document.getElementsByTagName('img');
 
 for(var i=0;i<oImg.length;i++)
 {
 
 var oImgA=oImg[i];
 oImgA.index=i+1;
 
 oImgA.onclick=function(){
 
 //console.log(this);
 oBody.style.background='url(img/'+this.index+'.jpg) no-repeat';
 oBody.style.backgroundSize = '100% 100%'; 
 
 }; 
 }
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Detailed explanation of the method of implementing skin changing function in JS
js Dom realizes skin changing effect
Example of using jQuery combined with jQuery.cookie.js plug-in to implement skinning function
JavaScript to implement skin changing function
js to simply implement web page skinning function
js to achieve simple web page skinning effect
AngularJS website skinning example
js+css to simply achieve web page skinning effect
js dynamically modifies the entire page style to achieve skin-changing effect
JavaScript to achieve skin effect (change background)

<<: Nginx learning how to build a file hotlink protection service example

>>: Perfect solution to the problem of connection failure after MySQL client authorization