本例参考并改进自：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 属性的更多相关文章

  1. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  2. 原生js获取display属性注意事项

    原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...

  3. 原生js用div实现简单的轮播图

    文章地址 https://www.cnblogs.com/sandraryan/ 原生js实现轮播图. 打开页面图片自动轮播,点击prev next按钮切换到上/下一张图片,点击1-5切换到对应图片. ...

  4. selenium web driver 使用JS修改input属性

    selenium获取input时候,发现type=”hidden” 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit ...

  5. js 修改css属性值

    js不能修改样式表 但是可以修改元素:比如 <div id="test" class="star-rating"></div> 对于上面 ...

  6. js修改div标签中的内容

    <div id='divId'>初始文字</div> <script> $(document).ready(function(e){ $('#divId').htm ...

  7. 原生JS：全局属性、全局方法详解

    全局属性.全局方法 原创文章,转摘请注明出处:苏福:http://www.cnblogs.com/susufufu/p/5853342.html 首先普及几个我总结的非常实用又很基础的知识:(呵呵,仅 ...

  8. 通过原生js添加div和css

    function createStyle(){ return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px ...

  9. 原生JS修改标签样式为带阴影效果

    代码如下: JS部分 //点击时候,改变样式 function GetCategoryInfo(value) { var getInfo = value.toString().split(','); ...

随机推荐

  1. SQLServer len 函数， 查字符串长度函数

    declare @name char(1000) --注意:char(10)为10位,要是位数小了会让数据出错 set @name='s{sss}fc{fggh}dghdf{cccs}x' selec ...

  2. Java基础 awt Graphics2D 生成矩形图片并向其中画一条直线

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  3. Logstash配置以服务方式运行

    Logstash官网最新版下载地址以及YUM源:https://www.elastic.co/cn/downloads/logstash Logstash最常见的运行方式即命令行运行 ./bin/lo ...

  4. 【GM4008】GM4008升级固件发布（版本V4.2.1.1）

    ===================== GM4008固件升级发布 ===================== 〇.简介:GM4008 8通道0-24mA电流采集模块,采用全电气隔离方案,配合高性能 ...

  5. Nginx修改时间戳

    1.安装nginx,注意不要安装nginx-common或者nginx-full sudo apt-get install nginx sudo apt-get install nginx-commo ...

  6. Superset配置impala数据源

    1.安装impyla pip install impyla 2.在superset页面配置如下,此时impala是有kerberos认证的 impala://xxxx:xx/default?auth_ ...

  7. LeetCode_485. Max Consecutive Ones

    485. Max Consecutive Ones Easy Given a binary array, find the maximum number of consecutive 1s in th ...

  8. Spring MVC -- 下载文件

    像图片或者HTML文件这样的静态资源,在浏览器中打开正确的URL即可下载,只要该资源是放在应用程序的目录下,或者放在应用程序目录的子目录下,而不是放在WEB-INF下,tomcat服务器就会将该资源发 ...

  9. 修改Window服务器虚拟内存位置

    系统采用的是windows server2008操作系统,硬件部门在分配磁盘的时候C盘只有50G,其中虚拟内存就占用了30G,再除去操作系统占用空间,可用自由支配空间较小,会出现在部分异常情况下C盘占 ...

  10. 使用极光第三方IM的时候服务器报错Caused by: java.net.UnknownHostException: api.im.jpush.cn

    Caused by: java.net.UnknownHostException: api.im.jpush.cn 服务器报这个:首先查看服务器是否能ping通,如果能ping通,则看下 vi /et ...