JS练习之换背景/换肤

最新推荐文章于 2024-03-06 23:02:33 发布

风中梦铃s

最新推荐文章于 2024-03-06 23:02:33 发布

阅读量1.1k

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/m_S_L/article/details/85028825

版权

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、实现原理：利用JS给body换背景图片，核心语句：

document.body.style.backgroundImage = "url(路径)";

2、整体代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        body {
            background: url(images/1.jpg) top center;
        }
        .box {
            height: 150px;
            background: rgba(255,255,255,.3);
            text-align: center;
            padding-top:50px;
        }
        .box img {
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function(){
            var pic1 = document.getElementById("pic1");
            var pic2 = document.getElementById("pic2");
            var pic3 = document.getElementById("pic3");
            pic1.onclick = function(){
                document.body.style.backgroundImage = "url(images/1.jpg)";
            }
            pic2.onclick = function(){
                document.body.style.backgroundImage = "url(images/2.jpg)";
            }
            pic3.onclick = function(){
                document.body.style.backgroundImage = "url(images/3.jpg)";
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="images/1.jpg" alt="" width="150" id="pic1"/>
    <img src="images/2.jpg" alt="" width="150" id="pic2"/>
    <img src="images/3.jpg" alt="" width="150" id="pic3"/>
</div>
</body>
</html>