百度换肤效果

最新推荐文章于 2024-05-18 21:57:13 发布

m_0_1_0_1

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量105

点赞数

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123759280

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：当点击了某个图片时，就把页面背景改为当前图片。核心就是把当前图片的src路径给取出来，给body当做背景即可。

注：当使用querySelector来获取元素的时候：

类名前加"." id名前加"#" (不要忘了)

<body>
    <ul class="baidu">
        <li><img src="./img/1.jpg" alt="" /></li>
        <li><img src="./img/2.jpg" alt="" /></li>
        <li><img src="./img/3.jpg" alt="" /></li>
    </ul>
    <script>
        //获取元素
        var img = document.querySelector(".baidu").querySelectorAll("img");
        //循环注册事件
        for (var i = 0; i < img.length; i++) {
            img[i].onclick = function() {
                //this.src 点击图片的路径
                document.body.style.backgroundImage = "url(" + this.src + ")";
            };
        }
    </script>
</body>

m_0_1_0_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度换肤效果

思路：当点击了某个图片时，就把页面背景改为当前图片。核心就是把当前图片的src路径给取出来，给body当做背景即可。注：当使用querySelector来获取元素的时候：类名前加"." id名前加"#" (不要忘了)<body> <ul class="baidu"> <li><img src="./img/1.jpg" alt="" /></li> <li><img sr..
复制链接

扫一扫