IE浏览器不支持document.getElementsByClassName的解决办法

Posted 2020-12-19 ywy8

1、基础方法①

/**
 * 通过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;
    }
} 

2、基础方法②

/**
 * 判断节点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;
}

3、调用

var tags = getClassNames(‘active‘, ‘li‘);
if (null != tags) {
    // 遍历对象,改其css样式
    for ( var i = 0; i < tags.length; i++) {
        tags[i].className = ‘‘;
    }
}
param.className = ‘active‘;

4、说明

‘active‘是要操作的样式，‘li‘是要查找的标签。