Using the native JS modify DIV property

Since the present embodiment with reference to and improvement: https: //www.jianshu.com/p/2961d9c317a3
We can learn together! !
<!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
         * @ param2 properties (note that this is a string type)-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">
        the let changeStyle* /
         * @ param3 attribute value
         * @ param1 elements
         * Modify attributes*/ *
        
         = (ELE, attr, value) => {
             // NOTE: attr herein is a character string, if no .attr manner as with 
            ele.style [attr] = value; 
        } 


        / * * 
         * randomly generated rgb color 
         * the param1 min @ 
         param2 maximum @ * 
        * / 
        the let changeColor = (min, max) => { 
            R & lt = 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',when pressing the reset button after the style//() {
                    function
                    == buttons.length I -. 1 && (divBox.style.cssText = '' );
                     // only when pressed and each time randomly generated color discoloration 
                    let bgColor = i == 2 changeColor ( 0, 255):? '' ; 
                    the let changValues = new new the Array ( '600px', '600px', bgColor, '50% ',' none ',' Block ' ); 
                    changeStyle (divBox, changeAttrs [I], changValues [I]); 
                }) ; 
            } 
        }
     </ Script> 
</ body> 
</ HTML>
Using the native JS modify DIV property

Guess you like
