仅记录学习的新知识和示例，无干货。
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中存储的属性。
时间： 2024-11-01 12:43:38