使用原生JS 修改 DIV 属性

Posted 2022-03-09 duxiu-fang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用原生JS 修改 DIV 属性相关的知识，希望对你有一定的参考价值。

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

以上是关于使用原生JS 修改 DIV 属性的主要内容，如果未能解决你的问题，请参考以下文章

JS原生监听滚动条

js原生获取css属性

原生js实现数据单向绑定

原生JS offsetX和offsetY引起抖动

如何利用原生js更改css样式

js如何修改样式？