JavaScript常用的方法和函数（setAttribute和getAttribute ） Aboo

仅记录学习的新知识和示例，无干货。

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>

View Code

此示例的要求是为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中存储的属性。