本例参考并改进自：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. OpenCV2 与opencv3 问题解决

    本文链接:https://blog.csdn.net/ling_xiobai/article/details/79691785今天使用opencv运行一个脚本,但是出现cv2.cv.BoxPoints ...

  2. linux下检查网络连通情况

    MTR是一种简单的跨平台命令行网络诊断工具,它将常用的traceroute和ping程序的功能组合到一个工具中. 与traceroute类似, mtr输出关于数据包从运行mtr的主机到用户指定的目标主 ...

  3. Android: NDK中的Android.mk和Application.mk

    1. 简介 Android.mk  可用来描述要编译的某个具体模块的相关信息.比如:指定编译该模块时所需要的源文件.编译该模块时要链接的库文件.该模块编译完成后生成的库的名字等等.Applicatio ...

  4. mysql判断表字段或索引是否存在，然后修改

    判断字段是否存在: DROP PROCEDURE IF EXISTS schema_change; DELIMITER // CREATE PROCEDURE schema_change() BEGI ...

  5. odoo开发笔记 -- 触发机制/埋点设置

    场景描述: 项目需求中,经常会需要,当某个字段处某个特定状态时候,触发执行特定的方法:或者创建某条记录的时候,同时做另一个操作:如何实现类似的需求? 实现方式: odoo中提供了几种触发方式: 1. ...

  6. Window 如何整理并删除无用的电脑文件 --不错的

    重复文件查找:https://download.csdn.net/download/rerere__rereredd/9745723   Duplicate Cleaner Pro 4.0.4中英文多 ...

  7. 使用python脚本批量设置nginx站点的rewrite规则

    一般情况下,配置rewrite重写规则使用shell脚本即可: 把url拼凑成1,2文件中中的格式,运行 chongxie.sh 即可生成我们需要的rewrite规则 [root@web01:/opt ...

  8. 【PHP】两个时间段间隔30分钟的所有时间

    运用场景: 比如在进行配送时候,需要让用户选择 送达时间, 平台只需要设置每天的营业时间.比如:08:00 到  22:30. 前台在展示时候: 就需要处理成各个时间段来展示: 代码实现: <? ...

  9. 通过下载git包来安装git

    Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.而国外的GitHub和国内的Coding都是项目的托管平台.但是在使用Git工具的时候,第一步要学会如何安装gi ...

  10. sqlserver 创建分区表

    我们知道很多事情都存在一个分治的思想,同样的道理我们也可以用到数据表上,当一个表很大很大的时候,我们就会想到将表拆 分成很多小表,查询的时候就到各个小表去查,最后进行汇总返回给调用方来加速我们的查询速 ...