m13534239306 2016-08-11 08:21 采纳率: 0%
浏览 18699
已结题

IE8及以下版本调试时提示 无法获取未定义或 null 引用的属性“style”

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checkbox的选中事件</title>
<style type="text/css">
div{ width:200px; height:200px; border:1px solid #CCC; color:#00C;}
table { width:400px; border:1px solid #999; border-collapse:collapse; }
table tr { width:400px; height:100px; border:1px solid #999; }
.select { display:none;}
</style>
<script type="text/javascript"> 
window.onload = function(){
    var DEFAULT_VERSION = "8.0";
    var browser = navigator.userAgent;//获取浏览器版本信息 
    var safariVersion;
    //alert(navigator.userAgent);   

    if(browser.indexOf("MSIE")>0){//判断是否是IE浏览器
        safariVersion =  browser.match(/MSIE ([\d.]+)/)[1];
        if(safariVersion <= DEFAULT_VERSION){
            var aInput = getClassNames("select_tr","input");
            var aTr = getClassNames("select","input");
        }else{
            var aInput = document.getElementsByClassName("select_tr");
            var aTr = document.getElementsByClassName("select"); 
        }
    }else{
        var aInput = document.getElementsByClassName("select_tr");
        var aTr = document.getElementsByClassName("select"); 
    }  

    for(var i=0;i<aInput.length;i++){
        aInput[i].index = i;
        aInput[i].onclick = function(){
            alert(this);
            if(this.checked){
                aTr[this.index].style.display = "block";
            }else{
                aTr[this.index].style.display = "none";
            }
        }
    }

    function getClassNames(classStr,tagName)
    {  
        if(document.getElementsByClassName){//判断浏览器是否兼容getElementsByClassName属性  
            //浏览器兼容getElementsByClassName属性，则可直接使用document.getElementsByClassName  
            return document.getElementsByClassName(classStr)
        }else{//浏览器不兼容getElementsByClassName的情况下  
            var nodes = document.getElementsByTagName(tagName),ret = [];           
            for(i = 0; i < nodes.length; i++){  
                if(hasClass(nodes[i],classStr)){  
                    ret.push(nodes[i]);  
                }  
            }  
            return ret;  
        }  
    }
    function hasClass(tagStr,classStr){  
        var arr=tagStr.className.split(/\s+/ );  //这个正则表达式是因为class可以有多个,判断是否包含  
        for (var i=0;i<arr.length;i++){  
            if (arr[i]==classStr){  
                return true ;  
            }  
        }  
        return false ;  
    }

}
</script>
</head> 
<body>
<label><input type="checkbox" value="NBA" class="select_tr">NBA</label>
<label><input type="checkbox" value="football" class="select_tr"">足球</label>
<label><input type="checkbox" value="badminton" class="select_tr">羽毛球</label>
<table> 
    <tr>
        <td>main content</td>
    </tr>
    <tr class="select" id="first">
        <td>NBA</td>
    </tr>
    <tr class="select" id="second">
        <td>足球</td>
    </tr>
    <tr class="select" id="third">
        <td>羽毛球</td>
    </tr>
    <tr>
        <td>others content</td>
    </tr>
</table>
</body>
</html>
  • 写回答

1条回答

  • Go 旅城通票 2016-08-11 08:48
    关注
                 if (browser.indexOf("MSIE") > 0) {//判断是否是IE浏览器
                safariVersion = browser.match(/MSIE ([\d.]+)/)[1]; 
                if (safariVersion <= DEFAULT_VERSION) {
                    var aInput = getClassNames("select_tr", "input");
                    var aTr = getClassNames("select", "tr");////////////////////标签名称传递错了
                } else {
                    var aInput = document.getElementsByClassName("select_tr");
                    var aTr = document.getElementsByClassName("select");
                }
            }
    评论

报告相同问题？

悬赏问题

  • ¥15 安装svn网络有问题怎么办
  • ¥15 Python爬取指定微博话题下的内容，保存为txt
  • ¥15 vue2登录调用后端接口如何实现
  • ¥65 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥15 latex怎么处理论文引理引用参考文献