操作属性的方法分为两类：
1. . eg:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{width: 100px;height: 100px;} </style> </head> <script> window.onload=function (){ var oDiv=document.getElementById(‘div‘); oDiv.style.background=‘orange‘; }; </script> <body> <div id="div"></div> </body> </html>
[ ] eg:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{width: 100px;height: 100px;} </style> </head> <script> window.onload=function (){ var oDiv=document.getElementById(‘div‘); oDiv.style[‘background‘]=‘orange‘; var wd=‘width‘; oDiv.style[wd]=‘300px‘; }; </script> <body> <div id="div"></div> </body> </html>
共同点:能用‘.‘的地方一定可以用[]代替。
不同点：[]可写变量，‘.‘不可以。
2. getAtrribute(‘属性名‘)---获取属性
eg:
<!doctype html> <html> <head> <meta charset="utf-8"> <script> window.onload=function (){ var oBtn=document.getElementById(‘btn‘); alert(oBtn.getAttribute(‘index‘)); }; </script> </head> <body> <input type="button" value="agos" index="1" id="btn" /> </body> </html>
setAtrribute(‘属性名‘,‘属性值‘)---设置属性
eg:
<!doctype html> <html> <head> <meta charset="utf-8"> <script> window.onload=function (){ var oBtn=document.getElementById(‘btn‘); oBtn.setAttribute(‘index‘, ‘2‘); }; </script> </head> <body> <input type="button" value="agos" index="1" id="btn" /> </body> </html>
1,2的区别：
1.
. [] 不能获取行间的自定义属性
getAtrribute 可以获取行间的自定义属性
2.
. [] 不改变属性值的类型 获取到的属性值是什么类型就是什么类型
setAtrribute 改变属性值的类型 都为string
3.
. [] 行间看不到设置的自定义属性
setAtrribute 行间可以看到设置的自定义属性
原文：http://www.cnblogs.com/agosto/p/5027884.html