码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript对象获取属性的方法(.和[]方式)

时间:2020-03-21 21:34:07      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:function   inpu   padding   attr   script   一个   ret   可变   strong   

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{
        width: 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是我传的参数,值是可变的,当然就不可以用.的方式获取属性值啦~小伙伴们不要采坑哦!

JavaScript对象获取属性的方法(.和[]方式)

标签:function   inpu   padding   attr   script   一个   ret   可变   strong   

原文地址:https://www.cnblogs.com/yanl55555/p/12541973.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!