JS通过dom操作，来改变元素的属性，把这个改变过程，封装成一个函数，

最新推荐文章于 2022-10-17 15:30:45 发布

ryipei

最新推荐文章于 2022-10-17 15:30:45 发布

阅读量126

点赞数

分类专栏： JS 文章标签： JavaScript DOM 元素操作样式修改动态效果

本文链接：https://blog.csdn.net/qq_40739261/article/details/115384893

版权

JS 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

<div id="box">绿茶</div>
    <button id="btn">点击变化盒子</button>

#box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            /* border: 1px solid red; */

        }

//获取对应标签
        var obox = document.getElementById("box");
        var obtn = document.getElementById("btn");
        // 绑定事件   事件源.on事件类型 =function(){   事件处理程序   }
        obtn.onclick = function () {
            // 第1种方法
            /*  // 修改属性   元素.style.样式属性 =  "";
             obox.style.width = "200px";
             obox.style.height ="200px";
             obox.style.backgroundColor = "green"; */

            //第二种方法---封装成函数
            setCss(obox,
                {
                    width: "200px",
                    height: "300px",
                    backgroundColor: "green",
                    color: "yellow"
                }
            )
        }

        function setCss(ele, css) {
            // css { key:val }
            for (var key in css) {
                //console.log(css[key]);
                // obox.style.width = "300px";
                ele.style[key] = css[key];
                //console.log(css[key]);   //   属性的值
                //console.log("key："+key);  // 属性名
                //console.log("ele.style.width："+ele.style.width);
                //console.log("ele.style[key]："+ele.style[key]);
                //var ret =ele.style[key];
                //console.log("ele.style[key]："+ret);
            }
        }