wordpress切换背景图

学了jsDOM事件时,遇到onchange这个事件，就想到wordpress弄个下拉框切换背景图，好久没折腾wordpress，这次来折腾一下~

效果图见博客左上角背景切换按钮~（PC端才有~）

把以下js放到wordpress header.php文件head标签之间~

Js code

<script>
        window.onload = jb;
        function jb(){
            var bgcolor=document.getElementById('bg');
            bgcolor.onchange=function(){
                var num=bgcolor.value;
                console.log(num);
                document.body.className="body";
 
                if(num=="1"){
                    document.body.className="bodya";
                }
                else if(num=="2"){
                    document.body.className="bodyb";
                }
                else if(num=="3"){
                    document.body.className="bodyc";
                }
          else {
 
                 document.body.className="null";
 
                }
            }
 
        }
    </script>

将一下样式放在你的style.css样式文件种（部分主题可能命名不一样）样式中得图片自行替换（注意图片路径）

Css code

     .bodya {
            background-image: url("img/1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .bodyb {
            background-image: url("img/2.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .bodyc {
            background-image: url("img/3.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

切换选项放在那个位置，得你自己定~

html code

<select name="" id="bg">
    <option value="">请选择</option>
    <option value="1">壁纸一</option>
    <option value="2">壁纸二</option>
    <option value="3">壁纸三</option>
</select>