标签：
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 }
setAttribute,,,getAttribute,,,,
标签：
原文地址：http://www.cnblogs.com/zfj-world/p/4772924.html
