网页换皮肤

在多年前的浏览器中，给网页更换背景皮肤这个功能很常见。有两种更换方式，将背景换成图片或换成指定的颜色。

更换图片背景皮肤：

最终效果：

网页更换图片皮肤

html代码结构：

<style type="text/css">
    html,body{
        width:100%;
        height:100%;
        overflow: hidden;
    }
    .box{
        width:100%;
        height:0;
        background:pink;
        overflow:hidden;
        transition:height 2s ease;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .box>img{
        width: 200px;
        height: 100px;
        border-radius:10px;
    }
</style>
<div class="box">
    <img src="./images/1.jpg" alt="">
    <img src="./images/2.jpg" alt="">
    <img src="./images/3.jpg" alt="">
</div>
<button class="btn">按钮</button>

js代码：

// 获取标签
var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
var oImgs = document.querySelectorAll('.box>img');
// 给按钮绑定单击事件
btn.onclick = function(){
    // 如果div盒子的高度不为0
    if(box.offsetHeight){
        // 将盒子的高度设置为0
        box.style.height = 0
    }else{
        // 如果盒子的高度是0，就将盒子的高度设置150
        box.style.height = '150px'
    }
}
// 遍历所有img标签
for(var i=0;i<oImgs.length;i++){
    // 给所有img绑定单击事件
    oImgs[i].onclick = function(){
        // 将当前图片的路径设置给body的背景
        document.body.style.backgroundImage = 'url('+this.src+')';
        // 设置body的背景图大小
        document.body.style.backgroundSize = '100% 100%';
        // 设置body的背景图不平铺
        document.body.style.backgroundRepeat = 'no-repeat';
        // 将盒子高度设置为0
        box.style.height = 0
    }
}

更换颜色背景皮肤

最终效果：

网页更换颜色皮肤

html代码结构：

<style>
.box{
    width: 200px;
    height: 200px;
    border:1px solid #000;
}
.box:after{
    content:"";
    display: block;
    clear:both;
}
</style>
<div class="box"></div>

js代码：

// 获取box盒子
var box = document.querySelector('.box');
// 创建4个div放在box中
for(var i=1;i<=4;i++){
    var div = document.createElement('div')
    // 给div设置样式
    setStyle(div,{
        width: "100px",
        height: "100px",
        float: "left",
        backgroundColor: getColor()
    })
    // 将div放在box中
    box.appendChild(div)
}
// 获取box下的所有div
var divs = document.querySelectorAll('.box>div');
// 遍历divs绑定事件
for(var i=0;i<divs.length;i++){
    // 给每个div绑定事件
    divs[i].onclick = function(){
        // 获取到当前点击的这个div的背景颜色，设置给body的背景
        document.body.style.backgroundColor = getStyle(this,'backgroundColor')
    }
}
// 获取样式的函数
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return getComputedStyle(ele)[attr]
    }else{
        return ele.currentStyle[attr]
    }
}
// 批量设置样式的函数
function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr]
    }
}
// 获取随机颜色的函数
function getColor(){
    return `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`;
}