欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用原生JS 修改 DIV 属性

程序员文章站 2022-05-26 14:45:42
本例参考并改进自:https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习!! ......

本例参考并改进自: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>