使用原生JS 修改 DIV 属性

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

新老客户大回馈,云服务器低至5折

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

 


原文链接:https://www.cnblogs.com/duxiu-fang/p/11122871.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:[Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router

下一篇:深入V8引擎-AST(4)