input输入任何对应值 点击后面的按钮div显示对应的效果

css的代码：

<style>
        * {
            margin: 0;
            padding: 0
        }
        
        .box {
            width: 600px;
            margin: 20px auto;
            list-style: none;
            border: 1px solid gray
        }
        
        .show {
            height: 200px;
            overflow: auto;
            line-height: normal
        }
        
        li {
            line-height: 40px;
            padding-left: 5px
        }
        
        li+li {
            border-top: 1px solid gray
        }
        
        input {
            margin-right: 10px;
        }
        
        button {
            vertical-align: middle
        }
</style>

html中的代码：

<ul class="box">
        <li class="show">
            <div>效果</div>
        </li>
        <li><input type="text" value="deepskyblue" id="background"><button onclick="background()">背景颜色</button></li>
        <li><input type="text" value="white" id="color"><button onclick="color()">文字颜色</button></li>
        <li><input type="number" value="20" id="size"><button onclick="size()">文字大小</button></li>
        <li><input type="number" value="200" id="width"><button onclick="width()">修改宽度</button></li>
        <li><input type="number" value="100" id="height"><button onclick="height()">修改高度</button></li>
</ul>

js的代码：

        let inp = document.querySelectorAll('input');
        let btn = document.querySelectorAll('button');
        let div = document.querySelector('div');
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                let val = inp[i].value;
                switch (i) {
                    case 0:
                        div.style.backgroundColor = `${val}`;
                        break;
                    case 1:
                        div.style.color = `${val}`;
                        break;
                    case 2:
                        div.style.fontSize = `${val}px`;
                        break;
                    case 3:
                        div.style.width = `${val}px`;
                        break;
                    default:
                        div.style.height = `${val}px`;
                }
            }
        }