问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

写了一个控制div属性的小程序，为什么点击按钮并不能改变div属性？

头像
余鱼鱼
    1414
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制div属性</title>
    <style type="text/css">
    #outer{
        margin: 0 auto;
        text-align: center;
    }
    #pic{
        width: 100px;
        height: 100px;
        background-color: black;
        margin: 10px auto;
    }
    </style>
    <script type="text/javascript">
       var changeStyle=function(elem,attr,value){
        elem.style[attr]=value;
       }
       window.onload=function(){
        var oBtn=document.getElementsByTagName("input");
        var oAtr=["width","height","background","display","display"];
        var oVal=["200px","200px","red","none","block"];
        var oDiv=document.getElementById("pic");
        for(var i=0;i<oBtn.length;i++){
            oBtn[i].index=i;
            oBtn[i].onclick=function(){
                this.index=oBtn.length-1&&(oDiv.style.cssText='');
                changeStyle(oDiv,oAtr[this.index],oVal[this.index]);
            }

        }

       }
    </script>
</head>
<body>
    <div id="outer">
        <input type="button" value="变宽" />
        <input type="button" value="变高" />
        <input type="button" value="变色" />
        <input type="button" value="隐藏" />
        <input type="button" value="重置" />
        <div id="pic"></div>
    </div>
</html>
    javascripthtml5
    阅读 2.4k
    2 个回答
    得票最新
    头像
    stardew
      6.1k41633
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制div属性</title>
    <style type="text/css">
    #outer{
        margin: 0 auto;
        text-align: center;
    }
    #pic{
        width: 100px;
        height: 100px;
        background-color: black;
        margin: 10px auto;
    }
    </style>
    <script type="text/javascript">
       var changeStyle=function(elem,attr,value){
        elem.style[attr]=value;
       }
       window.onload=function(){
        var oBtn=document.getElementsByTagName("input");
        var oAtr=["width","height","background","display","display"];
        var oVal=["200px","200px","red","none","block"];
        var oDiv=document.getElementById("pic");
        for(let i=0;i<oBtn.length;i++){
            oBtn[i].index=i;
            oBtn[i].onclick=function(){
                this.index=oBtn.length-1&&(oDiv.style.cssText='');
                changeStyle(oDiv,oAtr[i],oVal[i]);
            }

        }

       }
    </script>
</head>
<body>
    <div id="outer">
        <input type="button" value="变宽" />
        <input type="button" value="变高" />
        <input type="button" value="变色" />
        <input type="button" value="隐藏" />
        <input type="button" value="重置" />
        <div id="pic"></div>
    </div>
</html>
      头像
      ShanaMaid
        389211

        看不懂的话建议楼主去看看什么是闭包

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制div属性</title>
    <style type="text/css">
    #outer{
        margin: 0 auto;
        text-align: center;
    }
    #pic{
        width: 100px;
        height: 100px;
        background-color: black;
        margin: 10px auto;
    }
    </style>
    <script type="text/javascript">
       var changeStyle=function(elem,attr,value){
        elem.style[attr]=value;
       }
       window.onload=function(){
        var oBtn=document.getElementsByTagName("input");
        var oAtr=["width","height","background","display","display"];
        var oVal=["200px","200px","red","none","block"];
        var oDiv=document.getElementById("pic");
        for(var i=0;i<oBtn.length;i++){
            oBtn[i].onclick=(function(i){
                return function(){
                    this.index=oBtn.length-1&&(oDiv.style.cssText='');
                    changeStyle(oDiv,oAtr[i],oVal[i]);
                }
            })(i);
        }

       }
    </script>
</head>
<body>
    <div id="outer">
        <input type="button" value="变宽" />
        <input type="button" value="变高" />
        <input type="button" value="变色" />
        <input type="button" value="隐藏" />
        <input type="button" value="重置" />
        <div id="pic"></div>
    </div>
</html>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题