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"; 

 

转载于:https://www.cnblogs.com/banbu/archive/2013/03/19/2968965.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中,如果要获取带有空格的class元素,我们可以使用querySelectorAll方法,并结合CSS的class选择器来实现。 首先,需要了解CSS的class选择器可以通过"."来选择具有某个class的元素。但是,如果class名称中含有空格,则不能直接使用"."来选择。这是因为空格通常用于表示元素的子孙关系,而不是class本身。 要解决这个问题,可以使用querySelectorAll方法来选择带有空格的class元素。该方法接受一个参数,该参数是一个CSS选择器字符串。我们可以使用特殊的属性选择器[class*=" "]来选择带有空格的class元素。 下面是一个示例代码: ```html <div class="my-class">这是一个带空格的class元素</div> <div class="my-class another-class">这是另一个带空格的class元素</div> <script> // 通过querySelectorAll方法选择带有空格的class元素 var elements = document.querySelectorAll('[class*=" "]'); // 遍历获取到的元素列表 for (var i = 0; i < elements.length; i++) { console.log(elements[i].innerHTML); } </script> ``` 在上面的示例中,我们使用了属性选择器[class*=" "]来选取所有带有空格的class元素。然后,我们遍历获取到的元素列表,并输出每个元素的innerHTML内容。 需要注意的是,使用属性选择器[class*=" "]会匹配包含空格的class名称,并且不区分空格出现的位置。因此,如果有多个class名称,只要其中一个包含空格,就可以被选中。 总结:通过使用属性选择器和querySelectorAll方法,我们可以方便地获取带有空格的class元素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值