【JS实现网页换肤】

富贵花开888

已于 2022-12-13 09:46:30 修改

阅读量1.3k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-08-06 11:11:46 首次发布

本文链接：https://blog.csdn.net/m0_46312303/article/details/126191530

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

JS实现网页换肤

在这里插入图片描述
单击俩个按钮实现网页换肤的功能，如下图所示：

<body>
    <button>皮肤1</button>
    <button>皮肤2</button>
    <script>
        // 3, 网页换肤, 点击皮肤1, 切换到第一张图的效果, 点击皮肤2切换到第二张图的效果
        //获取body document.body
        //获取所有的按钮
        var btns = document.querySelectorAll('button')
        btns[0].onclick = function () {
            document.body.style.backgroundImage =
                "url(https://img1.baidu.com/it/u=3217543765,3223180824&fm=253&fmt=auto&app=120&f=JPEG?"
                //url的地址可以改成自己准备的图片
            document.body.style.backgroundSize = "cover"
        }
        btns[1].onclick = function () {
            document.body.style.backgroundImage =
                "url(https://img2.baidu.com/it/u=1713796643,4188877777&fm=253&fmt=auto&app=138&f=JPEG?)"
            document.body.style.backgroundSize = "cover"
        }
    </script>
</body>