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

来源：互联网发布：淘宝代刷信誉是真的吗编辑：程序博客网时间：2024/05/29 08:17

原生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:
这里写图片描述

1 0