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>
JavaScript对象获取属性的方法(.和[]方式)的更多相关文章
- javascript面向对象（给对象添加属性和方法的方式）
1.在定义对象时,直接把属性和方法添加 <script type="text/JavaScript"> //给对象直接在定义时添加属性和方法 var g ...
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法
1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、编程步骤、缓存问题、乱码问题
目录 1 什么是ajax 2 获取ajax对象 3 ajax对象的属性和方法 4 使用ajax的编程步骤 5 缓存问题 6 乱码问题 1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是 ...
- Javascript常用对象的属性和方法
javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...
- JS对象 JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。
什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...
- JavaScript -- 时光流逝（四）：js中的 Math 对象的属性和方法
JavaScript -- 知识点回顾篇(四):js中的 Math 对象的属性和方法 1. Math 对象的属性 (1) E :返回算术常量 e,即自然对数的底数(约等于2.718). (2) LN2 ...
- JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素
一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...
- JavaScript访问对象的属性和方法
对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性. 二者区别:“ . ”表示法一般作为静态对象使用时来存取属性.而“[ ...
- HTML中DOM对象的属性和方法的层级关系是怎样的？（目录即层次）
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- JS中的RegExp对象常用属性和方法
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数 ...
随机推荐
- SonarQube集成Xunit单元测试
安装SonarQube 利用docker 安装SonarQube docker run -d --name sonarqube -e SONAR_ES_BOOTSTRAP_CHECKS_DISABLE ...
- spring同时集成mybatis和ibatis
最近来了一个新项目,说是新的项目,但是需要用到以前旧的模块代码,旧的模块使用架构为ssi 而新项目使用spring mvc +mybatis,考虑到工作量的问题,所以决定使用spring mvc +m ...
- TL431
1. 设置分流电压VKA 由于分流电压调节器是非理想的: 存在动态电阻ZKA,会导致VREF存在一个偏置电压: ( IKA - INOM ) × ZKA 其中,INOM 是 VKA = VREF 测试 ...
- ARMv8-A 地址翻译技术之MMU的前世今生
MMU的重要性不言而喻,支撑操作系统之上的各种复杂应用.但在正式讲MMU之前,我们先说说MMU的发展史,因为ARMv8-A的MMU相当复杂,直接切入正题,会显得比较枯燥.废话不多说,咱们马上开始: 一 ...
- C++开发分类
1.基础架构 2.音视频领域 3.安全方向 4.Linux虚拟化 5.Qt客户端.上位机 6.游戏领域 7.嵌入式 8.量化券商 暂时对基础架构.音视频和安全方向较为感兴趣.
- 最详细STL（二）deque
deque其实也是数组,也可以动态的添加和减少元素,但是和vector不同的是,deque可以快速的在头部和尾部添加减少元素(vector只能快速的在尾部添加),然而在插入元素的时候因为头部和尾部都可 ...
- Java并发编程之验证volatile的可见性
Java并发编程之验证volatile的可见性 通过系列文章的学习,凯哥已经介绍了volatile的三大特性.1:保证可见性 2:不保证原子性 3:保证顺序.那么怎么来验证可见性呢?本文凯哥将通过代码 ...
- C++ weak_ptr除了解决循环引用还能做什么？
C++: weak_ptr到底有什么用? 很多人对std::weak_ptr的认识只是不增加std::shared_ptr的引用计数,可以用来解决std::shared_ptr可能造成的循环引用问题. ...
- SQL Server – 冷知识 (新手)
前言 没有系统化学一本语言或技术, 那便会被一些冷知识坑. 这里做些记入. 变量作用域 SQL 是远古语法, 声明变量在最顶部就是一条上古法则. 如果我看见有了用这个法则写 C# 或 JS 我就会杀了 ...
- 让人眼前一亮的开源项目「GitHub 热点速览」
时隔两周,我又带着让人眼前一亮的开源项目回来了! 告别数据线.蓝牙.WiFi 和网络,只需用手机的摄像头扫描一张动图条形码(需安装应用),就能在设备间传输文件的 libcimbar,一款无需联网和蓝牙 ...