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

浏览数：32 / 时间：2015年06月09日

原生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>