使用原生JS 修改 DIV 属性

2019-08-14 10:04:00来源：博客园阅读 ()

本例参考并改进自：https://www.jianshu.com/p/2961d9c317a3

大家可以一起学习！！

<!DOCTYPE html>
<html lang="CH-ZN">
<head>
    <meta charset="utf-8">
    <title>按键修改DIV属性</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        body {
            text-align: center;
        }
        button {
            margin-top: 20px;
            width: 100px;
            height: 60px;
            background-color: green;
            color: #fff;
            border: none;
        }
        div {
            width: 400px;
            height: 400px;
            background-color: black;
            margin: 20px auto;
            display: block;
            transition: all 1s;
        }

    </style>
</head>
<body>
    <button>变宽</button>
    <button>变高</button>
    <button>变色</button>
    <button>变圆</button>
    <button>隐藏</button>
    <button>重置</button>
    <div></div>
    <script type="text/javascript">
        /**
         * 修改属性
         * @param1  元素
         * @param2  属性（注意这里是字符串类型）
         * @param3  属性值
        */
        let changeStyle = (ele, attr, value) => {
            // 注意：这里的 attr 为字符串，如果用.attr 的方式则无用
            ele.style[attr] = value;
        }


        /**
         * 随机生成 rgb 颜色
         * @param1  最小值
         * @param2  最大值
        */
        let changeColor = (min, max) => {
            r = Math.floor(Math.random() * (max - min) + min);
            g = Math.floor(Math.random() * (max - min) + min);
            b = Math.floor(Math.random() * (max - min) + min);
            return 'rgb('+ r + ',' + g + ',' + b + ')';
        } 

        window.onload = function () {
            const buttons = document.querySelectorAll('button');
            const divBox = document.querySelector('div');
            let changeAttrs = new Array('width', 'height', 'background', 'borderRadius', 'display', 'display');
            
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].addEventListener('click', function () {
                    // 当按下重置按钮后将重置样式
                    i == buttons.length - 1 && (divBox.style.cssText = '');
                    // 只有当且每次按下变色的时候随机生成颜色
                    let bgColor = i == 2 ? changeColor(0, 255) : '';
                    let changValues = new Array('600px', '600px', bgColor, '50%', 'none', 'block');
                    changeStyle(divBox, changeAttrs[i], changValues[i]);
                });
            }
        }
    </script>
</body>
</html>