属性是一个变量，用来表示一个对象的特征(height/width/color...)；方法是一个函数，用来表示对象的操作。
在JavaScript中，有两种方法访问对象的属性"."和"[ ]"。
1、使用"." "[ ]"访问对象属性
1> "."
oBtn.style.width
2> "[ ]"
oBtn.style['width'] //[ ]里面是字符串
2、访问对象的方法：
只能用"." eg:
oBtn.函数名()
3."."与"[ ]"使用场景：
扫描二维码关注公众号，回复：
62715 查看本文章
"."后面的值无法你修改；"[ ]"里面的值可以随便变
eg(有如下代码)：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
/*
第一行文本框内输入需要改变的属性(width/height/color)
第二行输入改变的具体样式的属性值(300px/100px/#fff)
点击确定按钮
使div的样式随着第一二行设置的样式而改变
*/
window.onload = function(){
var oAttr = document.getElementById('attr');
var oVal = document.getElementById('val');
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function(){
oAttr.value//存的'width'/'height'.....
oVal.value//'200px'/'#000'.....
oDiv.style.width = oVal.value;//.后面的值无法被替换或者修改
/* 可以执行，因为"."后面的width这个是定的，无法改变，只是对width赋值*/
oDiv.style.oAttr.value = oVal.value;
/*
相当于在div中，加了<div style = 'oAttr.value'></div>,但style并没有oAttr.value,并且oAttr.value会因为value值一直改变，结果会报错
*/
oDiv.style[oAttr.value] = oVal.value;//[]里的值可以修改(是字符串)
/*JS中"."允许被替换成"[]",这是没有影响的比如：oBtn['onclick']= function(){}*/
}
}
</script>
<body>
请输入属性名称：<input type="text" id="attr">
请输入属性值：<input type="text" id="val">
<input type="button" value="确定" id="btn1">
<div id="div1"></div>
</body>
</html>