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 }