这是为什么啊,style属性未定义

来源:5-3 函数调用

慕UI8820655

2016-11-23 09:26

http://img.mukewang.com/5834ef9e0001647d04480440.jpg这是为什么啊

写回答 关注

5回答

  • 我不是管家
    2016-11-24 09:32:20
    已采纳
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div{
    height: 200px;
    width: 200px;
    border: 1px solid saddlebrown;
    display: none;
    }
    </style>
    </head>
    <body>
    <!--
    获取选项卡和div
    -->
    
    <input type="button"id="btn1" value="选项卡一"/>
    <input type="button"id="btn2" value="选项卡二" />
    <input type="button"id="btn3" value="选项卡三" />
    <div id="div1" style="display: block;">内容一</div>
    <div id="div2">内容一2</div>
    <div id="div3">内容一3</div>
    <script>
    var btns=document.getElementsByTagName("input");
    var odiv=document.getElementsByTagName("div");
    
    for(var i=0;l=btns.length,i<l;i++){
        !function(i){
            odiv=document.getElementsByTagName("div");
            btns[i].onclick=function(){
                deColor();
                btns[i].style.background='blue';
                boxHide();
                odiv[i].style.display='block'
             //alert(odiv[i].innerHTML)
        }
        }(i)
    }
    //给所有的btns清除背景色
    function deColor(){
     for(var i=0;i<btns.length;i++){
         btns[i].style.background='';
     }
    }
    //注意,div只能3个,所有div隐藏,其实不建议用TagName,用className比较好,注意ie兼容就好,可以学习下
    //课程http://www.imooc.com/learn/138
    function boxHide(){
        for(var i=0;i<btns.length;i++){
        odiv[i].style.display='none'
        }
    }
    
    </script>
    </body>
    </html>

    亲,我是用闭包的方法,做这个功能的,为什么用闭包,是因为for循环是一次性吧所有i都循环出来,我也理解你之前的btns.index=i;,他是给每个下标i分类吧,不过我没用这种方法

    慕UI882...

    非常感谢!

    2016-11-24 14:50:45

    共 1 条回复 >

  • 我不是管家
    2016-11-24 09:59:18

    var i=0;l=btns.length,i<l;i++

    慕UI882...

    把第一个for循环条件l=btns.length,i<l 改成这geese var i=0;i<btns.length;i++,总之谢谢啦

    2016-11-24 15:09:11

    共 1 条回复 >

  • 我不是管家
    2016-11-24 09:58:38

    for循环里面有个小于号被转义了,相信你看的出来

  • 慕UI8820655
    2016-11-23 15:26:23

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    div{

    height: 200px;

    width: 200px;

    border: 1px solid saddlebrown;

    display: none;

    }

    </style>

    </head>

    <body>

    <!--

    获取选项卡和div

    -->

    <input type="button"id="btn1" value="选项卡一"/>

    <input type="button"id="btn2" value="选项卡二" />

    <input type="button"id="btn3" value="选项卡三" />

    <div id="div1" style="display: block;">内容一</div>

    <div id="div2">内容一2</div>

    <div id="div3">内容一3</div>

    <script>

    var btns=document.getElementsByTagName("input");

    var div=document.getElementsByTagName("div");

    for(var i=0;i<btns.length;i++){

    //console.log(i);//0,1,2

    btns.index=i;//i=0,1,2自定义一个index属性n

    var last=btns[i];//上一个

    btns[i].onclick=function(){

    last.style.background="";

    alert();

    //div[].style.display="none";

    this.style.backgroundColor="blue";

    //div[2].style.display="block";

    last=this;

    }

    }

    </script>

    </body>

    </html>


  • 我不是管家
    2016-11-23 09:45:25

    我竟然有点看不懂你的代码,声明index并赋值是btns.index=i么,不应该是var index=i;么

    你console.log(last.index)看看能出来什么

    慕UI882... 回复我不是管家

    就是我注释掉的那个地方

    2016-11-23 15:29:01

    共 5 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468785 学习 · 22562 问题

查看课程

相似问题