zoukankan      html  css  js  c++  java
  • JavaScript对象获取属性的方法(.和[]方式)

    js对象获取属性有两种方法:1.通过.的方式  2. 通过[]方式

    // 通过.方式获取属性值,key是静态的
    var aa = {name: "zhang", age: 18};
    console.log(aa.name);
     
    // 通过[]获取属性值, key是动态的,可以是字符串,或者数字的形式
    var bb = {"apple": 3, "pear": 2}
    var cc = {1: "number1", 2: "number2"}
    console.log(bb["apple"]);
    console.log(cc[1]);  // 注意这里的写法跟数组容易混淆,cc仍是对象,不是数组
     
    // 获取对象所有key的方法
    console.log(Object.keys(bb));  // 输出[ 'apple', 'pear' ]

    那什么是静态什么是动态?

    前言:

    今天封装了一个函数,发现写的时候用 [ ] 就可以, . 就不可以,就觉得非常奇怪,后来查看了一些大佬的技术博客之后,终于弄懂了这个问题,下面我跟大家分享一下。

    代码:获取任意一个元素的任意属性

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
             100px;
            height: 100px;
            background: pink;
            /* position: absolute; */
            left: 100px;
            top:50px;
        }
    </style>
        
    <body>
        <input type="button" value="按钮" id="btn">
        <div id="box"></div> 
        <script>
            var box = document.getElementById('box'); 
            function getStyle(element,attr){
                if(window.getComputedStyle){
                    return window.getComputedStyle(element,null)[attr];
                }else{
                    return element.currentStyle[attr];
                }
            }
            document.getElementById('btn').onclick=function(){
                // console.log(box.offsetLeft)
                console.log(getStyle(box,'top'));   //50px,是一个字符串类型
            }
        </script>
    </body>
    注意: 以上代码若将[attr]换成.attr就获取不到了,原因就是 通过.方式获取属性值,key是静态的通过[]获取属性值, key是动态的,可以是字符串,或者数字的形式,那这里的attr是我传的参数,值是可变的,当然就不可以用.的方式获取属性值啦~小伙伴们不要采坑哦!
  • 相关阅读:
    C#对象初始化器
    C#构造方法
    C#方法重载
    C#方法
    C#类 对象 字段和属性
    C#数组
    C#字符串
    C#原码反码补码
    字段、方法、属性
    单例模式、异常
  • 原文地址:https://www.cnblogs.com/yanl55555/p/12541973.html
Copyright © 2011-2022 走看看