JS兼用IE8的通过class名获取CSS对象组

 转自：Garon_InE

原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中不能使用，所以写了一个兼容IE的方法。

完整的页面代码如下： 
testJsGetCssClass.html

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 .test_class_div {
 5     font-size: 14px;
 6     border: 1px solid #ccc;
 7     margin: 10px;
 8     padding: 5px;
 9     font-weight: bold;
10     color: red;
11 }
12 </style>
13 
14 <script>
15     /**
16      *打印js对象详细信息
17      */
18     function alertObj(obj)
19     {
20         var description = "";
21         for ( var i in obj)
22         {
23             var property = obj[i];
24             description += i + " = " + property + "\n";
25         }
26         alert(description);
27     }
28 
29     /**
30      *通过class名和标签名获取css样式对象组
31      */
32     function getClassNames(classStr, tagName)
33     {
34         if (document.getElementsByClassName)
35         {
36             return document.getElementsByClassName(classStr)
37         } else
38         {
39             //为了兼容ie8及其以下版本的方法
40             var nodes = document.getElementsByTagName(tagName), ret = [];
41             for (i = 0; i < nodes.length; i++)
42             {
43                 if (hasClass(nodes[i], classStr))
44                 {
45                     ret.push(nodes[i])
46                 }
47             }
48             return ret;
49         }
50     }
51 
52     /**
53      *判断节点class存在性
54      */
55     function hasClass(tagStr, classStr)
56     {
57         //这个正则表达式是因为class可以有多个,判断是否包含 
58         var arr = tagStr.className.split(/\s+/);
59         for ( var i = 0; i < arr.length; i++)
60         {
61             if (arr[i] == classStr)
62             {
63                 return true;
64             }
65         }
66         return false;
67     }
68 </script>
69 </head>
70 <body>
71     <div class="test_class_div">11111111</div>
72     <div class="test_class_div">22222222</div>
73     <div class="test_class_div">33333333</div>
74     <script>
75         //由于加载顺序,获取对象的代码应写在对象已加载之后
76         var divs = getClassNames('test_class_div', 'div');
77         if (null != divs)
78         {
79             alertObj(divs);
80             //遍历对象,改其css样式
81             for ( var i = 0; i < divs.length; i++)
82             {
83                 divs[i].style.color = "blue";
84             }
85         }
86     </script>
87 </body>
88 </html>

运行结果： 
初始字体颜色为红色，通过对象组修改后为蓝色。

firefox：

ie8: 

 

posted @ 2018-10-31 16:47  王小白吖~  阅读(886)  评论(0)  编辑  收藏  举报