原生js方法“document.getElementsByClassName”在ie8及其以下浏览器中不能使用，所以写了一个兼容IE的方法。
完整的页面代码如下：
testJsGetCssClass.html
<html>
<head>
<style type="text/css">
.test_class_div {
font-size: 14px;
border: 1px solid #ccc;
margin: 10px;
padding: 5px;
font-weight: bold;
color: red;
}
</style>
<script>
/**
*打印js对象详细信息
*/
function alertObj(obj)
{
var description = "";
for ( var i in obj)
{
var property = obj[i];
description += i + " = " + property + "\n";
}
alert(description);
}
/**
*通过class名和标签名获取css样式对象组
*/
function getClassNames(classStr, tagName)
{
if (document.getElementsByClassName)
{
return document.getElementsByClassName(classStr)
} else
{
//为了兼容ie8及其以下版本的方法
var nodes = document.getElementsByTagName(tagName), ret = [];
for (i = 0; i < nodes.length; i++)
{
if (hasClass(nodes[i], classStr))
{
ret.push(nodes[i])
}
}
return ret;
}
}
/**
*判断节点class存在性
*/
function hasClass(tagStr, classStr)
{
//这个正则表达式是因为class可以有多个,判断是否包含
var arr = tagStr.className.split(/\s+/);
for ( var i = 0; i < arr.length; i++)
{
if (arr[i] == classStr)
{
return true;
}
}
return false;
}
</script>
</head>
<body>
<div class="test_class_div">11111111</div>
<div class="test_class_div">22222222</div>
<div class="test_class_div">33333333</div>
<script>
//由于加载顺序,获取对象的代码应写在对象已加载之后
var divs = getClassNames(‘test_class_div‘, ‘div‘);
if (null != divs)
{
alertObj(divs);
//遍历对象,改其css样式
for ( var i = 0; i < divs.length; i++)
{
divs[i].style.color = "blue";
}
}
</script>
</body>
</html>运行结果：
初始字体颜色为红色，通过对象组修改后为蓝色。
firefox：
ie8:
时间： 2024-10-12 04:37:28