JS操作属性的两种方法

目的

• 介绍 javascript 操作属性的两种方法。
• 了解两种方法的区别。
• 了解应该什么时候使用两种方法。

前言

看完了慕课网的《 Tab 选项卡切换效果 》，自己尝试着不跟着视频写一个选项卡切换的 js ，果断出现了各种问题，属性操控。

JS两种操控属性的方法与区别

第一种

var odiv = getElementById('div1');
odiv.style.width = 400 + 'px';

这种方法是最常用的方法，也是比较直观，比较好用的做法，但其优缺点还是比较明显的。

优点：直观，便于理解，应用最为广泛

缺点：需要将属性作为传参时，就不好操作了

第二种

var odiv = getElementById('div1');
odiv.style['width'] = 400 + 'px';

优点：可以将属性用变量表示，从而可以实现传参。例如：var hehe = 'width'; odiv.style[hehe] = 400 + 'px';

缺点：貌似没有什么缺点

Tips：所有的 . 都可以用 [] 来表示。（道听途说，不知是真是假）

感悟

我们掌握的一些问题的解决方案，在某个范围内可以解决问题，但若想要实现范围外的功能时，我们就无能为力了。

所以多学习一些，多钻研一些，问题就更好解决一些。