给div动态添加样式

旧城等待， 2022-08-27 11:57 257阅读 0赞

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.  
3.  <html xmlns="http://www.w3.org/1999/xhtml">
4.  <head>
5.      <title>动态应用CSS样式</title>
6.      <script type="text/javascript">
7.          全局变量
8.          //命名空间
9.          var lee = \{\};
10.         Css文本解析
11.         /\*
12.          \* 将CSS文本转成JSON对象
13.          \* @return json
14.          \*/
15.         lee.cssFormatToJSON = function(cssTxt)\{
16.             var s = cssTxt.replace(/\[ \{\}\]/g, "");        
17.             var arr = s.split(";");
18.             var o = \{\};
19.             for(var i = 0; i < arr.length; i++)\{
20.                 if(arr\[i\].length > 2)\{
21.                     var arr2 = arr\[i\].split(':');
22.                     o\[arr2\[0\]\] = arr2\[1\].toString();
23.                 \}
24.             \}
25.             return o;
26.         \};
27. 
28.         lee.cssStyleNameToJsName = function(name)\{
29.             if(name == "float")
30.                 return "cssFloat";
31.             else if(name.indexOf('-') > -1)\{
32.                 var i = name.indexOf('-');
33.                 return name.substring(0, i) + name.substr(i+1, 1).toUpperCase() + name.substring(i+2);
34.             \}
35.             else
36.                 return name;
37.         \};
38. 
39.         lee.cssTextToJsNameJSON = function(cssTxt)\{
40.             var s = cssTxt.replace(/\[ \{\}\]/g, "");        
41.             var arr = s.split(";");
42.             var o = \{\};
43.             for(var i = 0; i < arr.length; i++)\{
44.                 if(arr\[i\].length > 2)\{
45.                     var arr2 = arr\[i\].split(':');
46.                     var name = lee.cssStyleNameToJsName(arr2\[0\]);
47.                     o\[name\] = arr2\[1\].toString();
48.                 \}
49.             \}
50.             return o;
51.         \};
52.         垃圾回收
53.         lee.gc = function(d)\{
54.             var a = d.attributes, i, l, n;
55.             if(a)\{
56.                 l = a.length;
57.                 for(i = 0; i < 1; ++i)\{
58.                     n = a\[i\].name;
59.                     if(typeof d\[n\] === 'function')\{
60.                         d\[n\] = null;
61.                     \}
62.                 \}
63.             \}
64.             a = d.childNodes;
65.             if(a)\{
66.                 l = a.length;
67.                 for(i = 0; i < l; ++i)\{
68.                     purge(d.childNodes\[i\]);
69.                 \}
70.             \}
71.         \}
72.         Div类
73.         function Div()\{
74.             this.div = document.createElement("div");
75.         \}
76. 
77.         Div.prototype.addStyle = function(cssTxt)\{
78.             var o = lee.cssTextToJsNameJSON(cssTxt);
79.             for(var n in o)
80.                 this.div.style\[n\] = o\[n\];    
81.         \};
82. 
83.         Div.prototype.appendParent = function(parent)\{
84.             this.parent = parent;
85.             this.parent.appendChild(this.div);
86.         \};
87. 
88.         Div.prototype.removeSelf = function()\{
89.             lee.gc(this.div);
90.             this.parent.removeChild(this.div);
91.         \};
92. 
93.         Div.prototype.addEvent = function(type, func)\{
94.             //IE浏览器
95.             if(this.div.attachEvent)
96.                 this.div.attachEvent("on" + type, func);
97.             //火狐浏览器
98.             else if(this.div.addEventListener)
99.                 this.div.addEventListener(type, func, false);
100.         \};
101.     </script>
102. </head>
103. <body>
104.     <script type="text/javascript">        
105.         测试代码
106.         var div = new Div();
107.         //目前还不支持类似于\{border:solid 1px red;\}这样的结构
108.         div.addStyle("\{position:absolute;left:200px;top:60px;width:100px;height:100px; backgroundColor:\#EFEFEF;border-style:solid;border-color:orange;border-width:2px;\}");
109.         div.appendParent(document.body);        
110.         div.addEvent('click', function()\{div.removeSelf.apply(div,\[\]);\});
111.     </script>
112. </body>
113. </html>
114.