js获取class

ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 
 5 window.onload = function()
 6 {   var topMenus = getClass('li','topMenu');
 7     for(var i=0;i < topMenus.length; i++)
 8     {
 9         alert(topMenus[i].innerHTML);        
10     }
11 
12 }
13 
14 function getClass(tagName,className) //获得标签名为tagName,类名className的元素
15 {
16     if(document.getElementsByClassName) //支持这个函数
17     {        return document.getElementsByClassName(className);
18     }
19     else
20     {       var tags=document.getElementsByTagName(tagName);//获取标签
21         var tagArr=[];//用于返回类名为className的元素
22         for(var i=0;i < tags.length; i++)
23         {
24             if(tags[i].class == className)
25             {
26                 tagArr[tagArr.length] = tags[i];//保存满足条件的元素
27             }
28         }
29         return tagArr;
30     }
31 
32 }
33 
34 
35 
36 </script>
37 
38 </head>
39 <body>
40 
41 <ul id="nav">
42 <li class="topMenu"><a href="#">产品介绍</a>
43     <ul class="subMenu">
44         <li><a href="#">产品1</a></li>
45         <li><a href="#">产品2</a></li>
46         <li><a href="#">产品3</a></li>
47         <li><a href="#">产品4</a></li>
48         <li><a href="#">产品5</a></li>
49         <li><a href="#">产品6</a></li>
50     </ul>
51 </li>
52 <li class="topMenu"><a href="#">服务介绍</a>
53     <ul class="subMenu">
54         <li><a href="#">服务1</a></li>
55         <li><a href="#">服务2</a></li>
56         <li><a href="#">服务3</a></li>
57         <li><a href="#">服务4</a></li>        
58     </ul>
59 </li>
60 <li class="topMenu"><a href="#">成功案例</a>
61     <ul class="subMenu">
62         <li><a href="#">案例1</a></li>
63         <li><a href="#">案例2</a></li>
64         <li><a href="#">案例3</a></li>
65         <li><a href="#">案例4</a></li>
66     </ul>
67 </li>
68 <li class="topMenu"><a href="#">关于我们</a>
69     <ul class="subMenu">
70         <li><a href="#">我们1</a></li>
71         <li><a href="#">我们2</a></li>
72         <li><a href="#">我们3</a></li>
73         <li><a href="#">我们4</a></li>
74     </ul>
75 </li>
76 <li class="topMenu"><a href="#">联系我们</a>
77     <ul class="subMenu">
78         <li><a href="#">联系1</a></li>
79         <li><a href="#">联系2</a></li>
80         <li><a href="#">联系3</a></li>
81         <li><a href="#">联系4</a></li>
82         <li><a href="#">联系5</a></li>
83         <li><a href="#">联系6</a></li>
84         <li><a href="#">联系7</a></li>
85     </ul>
86 </li>
87 
88 </ul>
89 </body>
90 </html>

 

 

在程序里WebBrowser控件可以用下面的办法。

 

 

function getstyle(sname) { 
for (var i=0;i<document.styleSheets.length;i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} else { 
rules = document.styleSheets[i].rules; 
} 
for (var j=0;j<rules.length;j++) { 
if (rules[j].selectorText == sname) { 
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
return rules[j].style; 
} 
} 
} 
} 


getstyle(".top").display = "none";

 

posted @ 2013-03-19 12:46  banbu  阅读(24090)  评论(1)  编辑  收藏  举报