本例参考并改进自：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. 把ngnix注册为linux服务 将Nginx设置为linux下的服务 并设置nginx开机启动

    一.创建服务脚本 vim /etc/init.d/nginx 脚本内容如下 #! /bin/sh# chkconfig: - 85 15 PATH=/usr/local/nginx/sbin/ DES ...

  2. Dubbo的集群容错与负载均衡策略及自定义（一致性哈希路由的缺点及自定义）

    Dubbo的集群容错策略 正常情况下,当我们进行系统设计时候,不仅要考虑正常逻辑下代码该如何走,还要考虑异常情况下代码逻辑应该怎么走.当服务消费方调用服务提供方的服务出现错误时候,Dubbo提供了多种 ...

  3. pipenv使用学习

    参考https://realpython.com/pipenv-guide/#package-distribution Pipenv: A Guide to the New Python Packag ...

  4. java发送application/json格式的post请求，需要登陆

    package util; import java.io.IOException; import java.io.InputStream; import java.io.OutputStreamWri ...

  5. Spark原理分析目录

    1 Spark原理分析 -- RDD的Partitioner原理分析 2 Spark原理分析 -- RDD的shuffle简介 3 Spark原理分析 -- RDD的shuffle框架的实现概要分析 ...

  6. Spring、SpringMVC、Spring Boot、Spring Cloud 概念、关系及区别

    注:此文章转载于其他大神 一.正面解读: Spring主要是基于IOC反转Beans管理Bean类,主要依存于SSH框架(Struts+Spring+Hibernate)这个MVC框架,所以定位很明确 ...

  7. 细说RESTful API之文档管理

    目录 API文档格式 文档管理方式 基于注解实现,代码和文档在一起 Swagger Api2Doc 基于API测试工具生成 Postman rest-client 独立编写文档 RAP DOCleve ...

  8. spring boot连接mysql8.0

    今天spring boot的项目数据库从mysql5.7换到mysql8.0,遇到点问题,特此记录下来 查看mysql的版本 mysql> select version();+--------- ...

  9. javascript jssdk微信上传一张图片的方法

    javascript jssdk微信上传一张图片的方法 <pre> wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'co ...

  10. 【转帖】Hadoop — HDFS的概念、原理及基本操作

    Hadoop — HDFS的概念.原理及基本操作 https://www.cnblogs.com/swordfall/p/8709025.html 分类: Hadoop undefined 1. HD ...