本例参考并改进自：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. C# 序列化与反序列化之DataContract与xml对子类进行序列化的解决方案

    C# 序列化与反序列化之DataContract与xml对子类进行序列化的解决方案 1.DataContract继承对子类进行序列化的解决方案 第一种是在 [DataContract, KnownTy ...

  2. Matlab Script to pre-process UAV123 tracking dataset

    Matlab Script to pre-process UAV123 tracking dataset 2019-11-08 09:43:11 Official project page: http ...

  3. Vue使用NProgress

    NProgress是页面跳转是出现在浏览器顶部的进度条官网:http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/np ...

  4. 【转】Sql Server查看所有数据库名,表名,字段名（SQL语句）

    -- 获取所有数据库名 select * from master..SysDatabases; -- 获取hotline数据库中所有表名 select name from hotline..SysOb ...

  5. paxos(mysql)

    https://web.stanford.edu/~ouster/cgi-bin/papers/OngaroPhD.pdf https://raft.github.io/raft.pdf 如何浅显易懂 ...

  6. https本地自签名证书添加到信任证书访问

    1.背景 本文适用于基于https(http+ssl)的网站通信.本地调试等,上线是请寻找免费 ssl证书申请. 本地调试过程中,一些特殊的场景需要我使用http+ssl通信,比如在Chrome中使用 ...

  7. 开源录屏软件Capture推荐

    参考链接:有哪些值得推荐的电脑录屏软件与手机录屏软件? - 霸都丶傲天的回答 - 知乎 下载地址(9.0支持中文)

  8. 【论文阅读】PBA-Population Based Augmentation:Efficient Learning of Augmentation Policy Schedules

    参考 1. PBA_paper; 2. github; 3. Berkeley_blog; 4. pabbeel_berkeley_EECS_homepage; 完

  9. element ui表格常用功能如：导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求

    <template> <div class="table-cooperte"> <el-table :data="tableData&quo ...

  10. VUE 同一页面路由参数变化，视图不刷新的解决方案

    1.监听路由处理 watch: { $route(to, from) { // 逻辑 // 重新调用数据接口 } }, 2.beforeRouteUpdate导航守卫 路由更新时触发 beforeRo ...