dom----网页换皮肤

最新推荐文章于 2024-11-02 19:19:35 发布

Kristen_Zyt

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量119

点赞数

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

本文链接：https://blog.csdn.net/fray_zyt/article/details/118710485

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

//html部分
<style>
    *{margin: 0;padding: 0;}
    html,body{
      width:100%;
      height:100%;
    }
    #box{
        width: 100%;
        height: 0;
        background:#abcdef;
        overflow:hidden;
        transition:height 2s ease;
    }
    ul{
      list-style:none;
      padding:0;
      margin:0;
      height:100%;
      display:flex;
      justify-content:space-evenly;
      align-items: center;
    }
    li{
      width:320px;
      height:200px;
    }
    li:nth-child(1){
      background:url(./images/1.jpg) 100%/320px;
    }
    li:nth-child(2){
      background:url(./images/2.jpg)  100%/320px;
    }
    li:nth-child(3){
      background:url(./images/3.jpg)  100%/320px;
    }
    </style>

<script>
    var btn = document.querySelector('button')      //获取按钮
    var box = document.querySelector('#box')        //获取盒子
    btn.onclick = function(){                        //给按钮绑定点击事件
        if(this.innerText == '打开'){
            this.innerText = '关闭'
            box.style.height = '200px'
        }else{
            this.innerText = '打开'
            box.style.height = '0'
            }
    }

    var lis = document.querySelectorAll('li')          //获取li元素
    for(var i = 0;i<lis.length;i++){                    //通过循环得到li的索引
        lis[i].onclick = function(){                    //给每一个li绑定点击事件
                 //此处的需要用到取行内式以外样式的获取方式
            var img = window.getComputedStyle.backgroundImage    
            document.body.backgroundImage = img +' 100% 100%/100% 100%'    //试图片平铺
            btn.innerText = '打开'
            btn.style.height = '0'
        }
    }
</script>