JavaScript对象获取属性的方法(.和[]方式)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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{
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对象获取属性的方法(.和[]方式)的主要内容，如果未能解决你的问题，请参考以下文章
Javascript知识汇总------获取构造函数名的方法和字符串处理方法