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的⽅法
javascript数组对象
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 = ElementById('box');
function getStyle(element,attr){
ComputedStyle){
ComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}
// console.log(box.offsetLeft)
console.log(getStyle(box,'top'));  //50px，是⼀个字符串类型
}
</script>
</body>
注意：以上代码若将[attr]换成.attr就获取不到了，原因就是通过.⽅式获取属性值，key是静态的，通过[]获取属性值, key是动态的，可以是字符串，或者数字的形式，那这⾥的attr是我传的参数，值是可变的，当然就不可以⽤.的⽅式获取属性值啦~⼩伙伴们不要采坑哦！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。