JavaScript to achieve skin effect (change background)

This article shares the specific code of JavaScript to achieve skin-changing effect for your reference. The specific content is as follows

Skin-changing effect: Click on different pictures to change the background of the corresponding page

Implementation ideas

1. Define a set of pictures, and assign the background picture path to each src attribute
2. Get a set of picture element objects (get a pseudo array)
3. The for loop binds the click event - - -onclick to the picture. In the event handler, the background image of the body element object is set to - - -the path of the currently clicked picture.
4. Note: The object of body element is obtained as - - -document.body, js is assigned the path of background image. Note the concatenation of the path - - -document.body.style.backgroundImage = 'url(' + this.src + ')';

Code Sample

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skin effect</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: url(images/壁纸1.jpg) no-repeat center top;
            background-size: cover;
        }
        
        .box {
            overflow: hidden;
            width: 610px;
            margin: 100px auto;
            background-color: #fff;
        }
        
        .box li {
            width: 25%;
            height: 100px;
            list-style: none;
            float: left;
            cursor: pointer;
            border: 1px solid #fff;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li><img src="images/壁纸1.jpg" alt=""></li>
        <li><img src="images/壁纸2.jpg" alt=""></li>
        <li><img src="images/壁纸3.jpg" alt=""></li>
        <li><img src="images/壁纸4.jpg" alt=""></li>
    </ul>
    <script>
        var pics = document.querySelector('.box').querySelectorAll('img');
        console.log(pics);
        for (var i = 0; i < pics.length; i++) {
            pics[i].onclick = function() {
                console.log(this.src);
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>

Page Effects

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:

Native JavaScript to achieve skinning
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

<<: MySQL grouping queries and aggregate functions

>>: Analysis of Apache's common virtual host configuration methods