JavaScript常用的方法和函数（setAttribute和getAttribute ）
仅记录学习的新知识和示例，无干货。
1.setAttribute和getAttribute （Attribute：属性）
setAttribute：为元素添加指定的属性，并为其赋值；如果指定的属性已经存在，则仅设置或改变它的值。
调用方法：element.setAttribute(attributeName,attributeValue)
这是一个方法，无返回值，IE8及以下不支持。
getAttribute：返回指定属性名的属性值。
调用方法：element.getAttribute(attributeName)
返回值为字符串
总结：attributeName为元素的属性名，attributeValue为元素的属性值，二者均为字符型
示例：
1 var comm={ 2 //setAttr为对象comm的一个方法，用于给元素设置属性 3 //e为形参，代表元素名称；strName为形参，代表所设置属性的名称；strValue为形参，代表所设置属性的值 4 setAttr:function(e,strName,strValue){ 5 e.setAttribute(strName,strValue); 6 }, 7 //getAttr为对象comm的一个方法，用于获取元素属性 8 //e为形参，代表元素名称；strName为形参，代表所设置属性的名称，无值 9 getAttr:function(e,strName){ 10 return e.getAttribute(strName); 11 } 12 }
以上为自定义一个对象用于给元素设置属性的方法。
调用上诉对象实现元素属性的改变示例如下：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script type="text/javascript" src=../../js/system.js></script> 6 <title></title> 7 <style type="text/css"> 8 .red{ 9 width: 260px; 10 height: 100px; 11 line-height: 100px; 12 text-align: center; 13 border: solid 1px red; 14 margin: auto; 15 } 16 .blue{ 17 width: 260px; 18 height: 100px; 19 line-height: 100px; 20 text-align: center; 21 border: solid 1px blue; 22 margin: auto; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="a" class="red">hello,Js!</div> 28 <div id="b">hello,Js2!</div> 29 <br/> 30 <input type="button" value="点我变色" id="bitRed"/> 31 <script type="text/javascript"> 32 //定义一个变量clasName，用于保存使用comm.getAttr获取的ID号为a的元素的class属性值 33 var clasName =comm.getAttr($$("a"),"class"); 34 //调用comm.serAttr函数为ID号为b的元素设置class属性，属性值为clasName，既a的class属性值 35 comm.setAttr($$("b"),"class",clasName); 36 //设定ID号为bitRed的元素的点击事件 37 $$("bitRed").onclick=function(){ 38 //为元素设置属性 39 //console.log()方法用于检测是否绑定成功，可删除 40 console.log("123"); 41 //为ID为a的元素设置样式,括号内实参分别对应形参e,strName,strValue 42 comm.setAttr($$("a"),"class","blue");//属性名，属性值 43 //定义一个变量clasName，用于保存使用comm.getAttr获取的ID号为a的元素的class属性值 44 //此变量clasName为局部变量，与上一个不同 45 var clasName =comm.getAttr($$("a"),"class"); 46 //调用comm.serAttr函数为ID号为b的元素设置class属性，属性值为clasName，既a的class属性值 47 comm.setAttr($$("b"),"class",clasName); 48 } 49 </script> 50 </body> 51 </html>
此示例的要求是为ID为a的元素设置样式，ID为b的元素样式跟随元素a的样式，点击按钮，元素a的样式发生改变，同时元素b的样式随之改变。
开始定义一个全局变量clasName，并调用comm对象的getAttr方法获取元素a的属性，并使用comm对象的setAttr方法为元素b设置属性，达到开始元素b属性跟随元素a的要求。然后再点击事件中，首先调用comm对象的srtAttr方法为元素a设置新的属性，并定义局部变量clasName存储使用comm对象的getAttr方法得到的a的属性，再给b设置局部变量clasName中存储的属性。
