今天的风儿有点喧嚣 2016-08-13 14:16 采纳率: 71.4%
浏览 3774
已采纳

js中函数传入dom对象后,在函数内修改dom对象属性后不生效?

js函数传参问题

问题描述:
我在script标签中声明了一个changepic函数和一个move_to(elem)函数,move_to(elem)函数用于
移动元素,在changepic直接传入dom对象,在move_to函数中直接修改传入的dom对象的属性,但是修改完属性之后页面中的元素不生效,找了半天也没找到原因,希望能有人帮我一下啊!
js代码:

 /******************元素移动函数***************************/  
function move_to(elem){
        alert(elem);
        var l=elem.style.left;
        var t=elem.style.top;
        elem.style.left="0px";
        /*if(!l){
            l=-200;
            k=l+"px";
            alert(k);
            elem.style.left=k;
            }
        if(!t){
            t=300;
            elem.style.top=t+"px";
            }*/
        }
/*****************改变图片位置***************************/    
function changepic(myitem){
    /***初始化****/
    var mitem=document.getElementById(myitem);
    var img_width=400;
    var ul=mitem.getElementsByTagName("ul")[0];
    var lis=ul.getElementsByTagName("li");
    var ul_width=img_width*lis.length;
    var str="";
    var timer1=null;
    var timer2=null;
    var time_interval=100;
    ul.style.left="-100px";
    //ul.style.top="0px";
    for(var i=0; i<lis.length;i++){
        str+="<button type='button'>"+(i+1)+"</button>";
        }
    mitem.innerHTML+=str;
    /*****调用元素移动函数*****/
    move_to(ul);
    }

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>  
<link href="css/mycss.css" rel="stylesheet" type="text/css">
</head>

<body>


        <div class="wrap" id="a">
            <div class="view">
                <ul>
                    <li><img src="images/01.jpg" /></li>
                    <li><img src="images/02.jpg" /></li>
                    <li><img src="images/03.jpg" /></li>
                    <li><img src="images/04.jpg" /></li>
                    <li><img src="images/05.jpg" /></li>
                </ul>
            </div>
        </div>




<script src="js/check_tools.js"></script>
<script>
    window.onload=function(){
        changepic('a');

        }   
</script>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px}
ul{ list-style:none}


.wrap{ width:400px; border:1px solid; margin:10px; text-align:center;}
.wrap button{ height:20px; width:20px; margin:5px; border:none}
.wrap .view{ height:260px; width:400px; position:relative; /*overflow:hidden;*/}
.wrap .view ul{ white-space:nowrap; font-size:0px; position:absolute; left:0px; top:0px;}
.wrap .view li{ display:inline;}
  • 写回答

2条回答 默认 最新

  • Go 旅城通票 2016-08-14 06:32
    关注
    
    
            /*****调用元素移动函数*****/
            //重新获取ul,innerHTML+=会生成新的dom对象(包括已经存在的),导致ul变量引用的之前的ul对象被销毁
            //不想破坏结构用appenChild,而不是innerHMTML来操作
            move_to(mitem.getElementsByTagName("ul")[0]);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 python:excel数据写入多个对应word文档
  • ¥60 全一数分解素因子和素数循环节位数
  • ¥15 ffmpeg如何安装到虚拟环境
  • ¥188 寻找能做王者评分提取的
  • ¥15 matlab用simulink求解一个二阶微分方程,要求截图
  • ¥30 乘子法解约束最优化问题的matlab代码文件,最好有matlab代码文件
  • ¥15 写论文,需要数据支撑
  • ¥15 identifier of an instance of 类 was altered from xx to xx错误
  • ¥100 反编译微信小游戏求指导
  • ¥15 docker模式webrtc-streamer 无法播放公网rtsp