setAttribute,,,getAttribute,,,,

時間 2019-12-02

標籤 setattribute getattribute 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .red {
 8             border: solid 1px red;
 9             width: 200px;
10             height: 100px;
11             text-align: center;
12             line-height: 100px;
13             margin: auto;
14         }
15 
16         .blue {
17             border: solid 1px blue;
18             width: 200px;
19             height: 100px;
20             text-align: center;
21             line-height: 100px;
22             margin: auto;
23         }
24     </style>
25     <script type="text/javascript" src="../../js/system.js"></script>
26 </head>
27 <body>
28 <div id="a" class="red">
29     hello js,,
30 </div>
31 <div id="b">
32     html js2 ,,
33 </div>
34 <input type="button" value="點我變紅" id="bitRed">
35 <script type="text/javascript">
36                                                      //id名爲b的元素的樣式隨着id名爲a的元素的樣式的變化而變化
37     var clasName = comm.getAttr($$("a"), "class");   //獲取id名爲a的元素的class樣式，並把它賦給clasName;
38     comm.setAttr($$("b"), "class", clasName);       //給id爲b的元素設置class樣式爲clasName;
39 
40     $$("bitRed").onclick = function () {
41 //        $$("a").setAttribute("class","blue");
42         comm.setAttr($$("a"), "class", "blue");
43         var clasName = comm.getAttr($$("a"), "class");
44         comm.setAttr($$("b"), "class", clasName);
45     }
46 </script>
47 </body>
48 </html>



//js樣式

 1 /**
 2  * Created by Ibokan on 2015/8/26.
 3  */
 4 function $$(id) {
 5     return document.getElementById(id);
 6 }
 7 19 var comm = {
20     setAttr: function (e, strName, strValue) {      //e是元素名稱 ，，strName是屬性名稱，，strValue是屬性值。。
21         e.setAttribute(strName, strValue);
22     },
23     getAttr: function (e, strName) {
24         return e.getAttribute(strName);
25     }
26 }

相關標籤/搜索

getattribute

setattribute

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。