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>
