使用原生JS 修改 DIV 属性

本例参考并改进自: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>

原文地址:https://www.cnblogs.com/duxiu-fang/p/11122871.html

时间: 2024-11-09 05:49:34

使用原生JS 修改 DIV 属性的相关文章

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

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

js 修改css属性值

js不能修改样式表 但是可以修改元素:比如 <div id="test" class="star-rating"></div> 对于上面的层的样式,可以这样修改: var test_div=docuemnt.getElementById("test"); test_div.style.width="80px";

原生js修改文本内容

关于修改文本的内容,有好多不同的写法,今天实现一个简单的的案例就是点击"编辑"按钮,文本内容可以保存.看下图: 这个例子想要实现的效果就是点击编辑,出现文本框,然后可以更改内容,关键就是在实际项目中可能会遇到有多行这样的内容,那么现在就只能用到传参来解决了,只要实现一个剩下的就都好说了,来看看代码: <ul id="list"> <li> <strong></strong> <input type="t

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

代码如下: JS部分 //点击时候,改变样式 function GetCategoryInfo(value) { var getInfo = value.toString().split(','); var infoHtml = "<b>档案类别:</b><br /><span>" + getInfo[0] + "</span><br /><b>著入方式:</b><br /&

用js修改css属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #fuhao{width: 20px} </style> </head> <body> <div> <input type="button"

原生js实现div拖拽+按下鼠标计时

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ height:1200px; background-color: azure; } #drag{ background-color: cornflowerblue; border: 1px solid black; position: absolute; width: 200px; height

原生js实现div拖拽

十分简单的效果. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body{ height:1200px; background-color: azure; } #drag{ background-color: cornflowerblue; border: 1px solid black; position: absolute; width: 100p

原生 js 让div上下左右居中

html 里写出一个div, css给div 定宽高和背景色: <div class="boxes"> </div> <style type="text/css"> .boxes{ width: 200px; height: 200px; background: #CCCCCC; } </style> 上面绘出的是一个宽高给为200的背景色为浅灰色的框框. 现在要让这个div 相对于浏览器居中,通过一段javascri

0510日重点:原生js修改豆瓣电影api 在angularjs里运用出现的bug

用$http.jsonp调用豆瓣电影api,会出现返回数据格式错误的bug.在控制器里加上下面的代码,才能正常获取到数据. function jsonp(url, callback) {        var script = document.createElement('script');        script.type = "text/javascript";        script.src = url + (url.indexOf('?') > 0 ? '&am