用JavaScript操作CSS滤镜实现最近新闻旁边的“new”

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>用JavaScript操作CSS滤镜实现最近新闻旁边的“new”</title>
 5     <style type="text/css">
 6         .abc span
 7         {
 8             display: inline-block; /*IE中只有块元素滤镜才有效*/
 9             color: #fff;
10             filter: glow(color=red,strength=2);
11             width: 50px;
12             font-weight:bold;
13             
14         }
15         .a
16         {
17             width: 100px;
18         }
19     </style>
20     <script type="text/javascript">
21        
22         var tempStrength = 1;
23         var idirection = 1;
24         var timerID = null;
25         function MyTimer() {
26             var ss = document.styleSheets[0]; //获得该文档的样式表，数组元素类型是CSSStyleSheet
27             //FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule
28             var rules = ss.cssRules ? ss.cssRules : ss.rules; 
29 
30             //某个规则不能通过这样访问rules[".a"],需要做循环拿出选择器的名称然后做比较进行筛选
31             for (var i = 0; i < rules.length; i++) {
32                 var rule = rules[i];
33                 if (!rule.selectorText)//css选择器的名称
34                     continue;
35 
36                 if (rule.selectorText.toLowerCase() == ".abc span") {
37                     //内嵌样式的filter属性的类型是对象
38                     //tempStrength = document.getElementById("span1").filters["glow"];
39                     //rule.style.color = "blue";
40 
41                     if (idirection == 1) {
42                         tempStrength++;
43                     } else {
44                         tempStrength--;
45                     }
46                     if (tempStrength == 3 && idirection == 1) {
47                         idirection = -1;
48                     }
49                     if (tempStrength == 2 && idirection == -1) {
50                         idirection = 1;
51                     }
52                     //内联样式的filter属性的类型是String
53                     rule.style.filter = "glow(color=red,strength=" + tempStrength + ")";
54                     timerID = setTimeout("MyTimer()", 1000);
55                 }
56             }
57 
58             //            tempStrength = document.getElementById("span1").filters["glow"].strength;
59             //            if (idirection == 1) {
60             //                tempStrength++;
61             //            } else {
62             //                tempStrength--;
63             //            }
64             //            if (tempStrength == 3 && idirection == 1) {
65             //                idirection = -1;
66             //            }
67             //            if (tempStrength == 2 && idirection == -1) {
68             //                idirection = 1;
69             //            }
70             //            document.all.span1.filters["glow"].strength = tempStrength;
71             //            timerID = setTimeout("MyTimer()", 500);
72             //            timerRunning = true;
73         }
74         
75     </script>
76 </head>
77 <body onload="MyTimer()">
78     <ul class="abc">
79         <li>1<span id="span1">new</span></li>
80         <li>2<span>new</span></li>
81         <li>3<span>new</span></li>
82         <li>4<span>new</span></li>
83     </ul>
84 </body>
85 </html>