控制div属性的变化

最新推荐文章于 2021-03-25 21:22:21 发布

亦是木子也是雨

最新推荐文章于 2021-03-25 21:22:21 发布

阅读量280

点赞数

分类专栏： js学习笔记 js实例文章标签：改变div的css属性 dom

本文链接：https://blog.csdn.net/qq_44162474/article/details/101714361

版权

js学习笔记同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

js实例

2 篇文章 0 订阅

订阅专栏

简单功能

通过点击按钮实现div样式的简单变化
效果如下：
在这里插入图片描述

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul, li {
            list-style: none;
        }
        ul {
            display: flex;
            width: 500px;
            height: 50px;
            margin: 0 auto;
        }
        li {
            box-sizing: border-box;
            flex: 1;
            justify-content: center;
            text-align: center;
            line-height: 50px;
            border: 1px solid #000;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: #000;
            margin: 50px auto 0;
        }
    </style>
</head>
<body>
    <ul>
        <li>变宽</li>
        <li>变高</li>
        <li>变色</li>
        <li>隐藏</li>
        <li>重置</li>
    </ul>
    <div class="div"></div>
    <script>
        function change() {
            var oDiv = document.getElementsByClassName('div')[0];
            var oLi = document.getElementsByTagName('li');
            var cssName = ['width', 'height', 'background', 'display', 'cssText'];
            var cssValue = ['200px', '200px', 'red', 'none', ' '];
            for(let i = 0; i < oLi.length; i++) {
                oLi[i].onclick = function() {
                    //下面注释的为什么不行
                    // oDiv.style.cssName[i] = cssValue[i]; 
                    oDiv.style[cssName[i]] = cssValue[i];
                }
            }
        }
        change();
    </script>
</body>
</html>

遇到的问题

for(let i = 0; i < oLi.length; i++) {
  oLi[i].onclick = function() {
        //下面注释的代码为什么不行
        // oDiv.style.cssName[i] = cssValue[i];  
        oDiv.style[name[i]] = cssValue[i];
        // console.log(typeof odiv.style); object
        // 含有特殊字符不能用'.'来访问，需要用'[]'来访问
    }
}

2.通过dom操作添加的css样式属于行间样式

3.amazing

 <script>
    var arr = ['width', 'height', 'background', 'display', 'display'];
     for(var i = 0; i < arr.length; i++) {
         console.log(arr[i]);
     }

     var name = ['width', 'height', 'background', 'display', 'display'];
     for(var i = 0; i < name.length; i++) {
         console.log(name[i]);
     }
  </script>