本例参考并改进自：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. tensorflow 预训练模型列表

    tensorflow 预训练模型列表 https://github.com/tensorflow/models/tree/master/research/slim Pre-trained Models ...

  2. Python之快速排序代码

    def quicksort(array): less = [] greater = [] if len(array) <= 1: return array pivot = array.pop() ...

  3. QT5 编译提示 cannot find GL/gl.h ubuntu16.04

    安装软件: sudo apt-get install mesa-common-dev sudo apt-get install libgl1-mesa-dev libglu1-mesa-dev

  4. (转)Navicat_12安装与破解，亲测可用！！！

    原文:http://www.yq1012.com/jichu/4634.html https://www.52pojie.cn/thread-867986-1-1.html 快速方式:CSDN下载安装 ...

  5. ireport5.6.0分组显示

    一,ireport中分组 二,java调用实现分组 一,ireport中分组: 1,新建模板文件,纸张随意,名称随意,路径随意 2,连接要分组的数据源 3,添加测试表和数据 CREATE TABLE ...

  6. squid4

    主机上的squid一直是傻瓜型使用,yum安装.默认配置.千年不动.突然漏扫出来3.X版本不能用了,搜了下,得升4.神奇的发现centos7的源(阿里源)里面竟然最高只有3.网上搜使用yum装的也都是 ...

  7. 5中I/O模型

    输入操作包括两个阶段1.等待网络数据到达,被复制到内核中的缓冲区2.从内核缓冲区复制到进程缓冲区5种I/O模型1.阻塞式I/O:包含数据被复制到内核缓冲区和应用进程缓冲区两个过程,调用recvfrom ...

  8. Linux CentOS7 通过 yum 搭建 svn 服务器，并配置权限

    1,使用 yum 安装 svn 服务器 yum -y install subversion rpm -ql subversion -- 改命令可以查看 svn 的安装位置 2,创建仓库根目录,可任意选 ...

  9. WIN10设置notepad++默认打开txt文件

    修改txt的默认打开方式为notepad++.效果如下图所示 修改方式: 1.新建名称为OpenFromNotepad++的txt文档,并将后缀名修改为reg格式(注册表格式),在文件中输入以下内容. ...

  10. javascript异步上传压缩图片并立即显示图片

    javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...