问答博客资讯标签用户活动
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

把ID名作为参数传到函数里，使用不了？

头像
tuihou123321
    49115112151
    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>定时器-移动</title>
  <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
 </head>

<style>
 #div{width:100px;height:100px;background:red;position:absolute; top:100px;}
 
</style>
 <body>
  <div id="div"></div>
<script>
var a=0;
function move(idName,time){
    var id='"'+idName+'"';
//下行打印的id值为"[object HTMLDivElement]"，但是我实际想要的效果是<div id="div"></div>；
    console.log(id);
    var obj=document.getElementById(id);
    var t=setInterval(function(){
       a=a+1;
        if(a<=200 && a>=0){
            obj.css("left",a);
        }
        else{
            clearInterval(t);
        }
    },time)
}

move(div,1000);

</script>


 </body>
</html>
    javascriptjquery
    阅读 12.9k
    10 个回答
    得票最新
    头像
    tuihou123321
      49115112151
      ✓ 已被采纳

      修改成这样就可以了

      <script>
var a=0;
function move(obj,time){
    var t=setInterval(function(){
       a=a+1;
        if(a<=200 && a>=0){
            obj.css("left",a);
        }
        else{
            clearInterval(t);
        }
    },time)
}
move($("#div"),10);
move($("#div2"),500);

</script>
      头像
      YT老秦
        80627
        var x = 'div'; // 注意字符串要加引号
var obj = document.getElementById(x); // 这边是x已经是变量，所以就不用再加引号了哦
console.log(obj);
        头像
        某熊猫桑
          16.1k61547

          看了好几遍确定是双引号不是俩单引号，我还以为我眼花了……

          <html>
<body>
  <div id="div"></div>
</body>

<script>
//设定一个变量x代替ID名为div的元素；
    var x=div;
    var obj=document.getElementById(""+ x +""); //这么一看挺萌的
    console.log(obj);
</script>
</html>
          头像
          Joeycz
            2774
            var x='div';
var obj=document.getElementById(x);
console.log(obj);
            头像
            sunshine999
              1545

              · "div" .没有id是‘“div”’的

              头像
              Chenbo_ICT
                1352
                var obj=document.getElementById(id);

                obj是一个DOM对象，不是jQuery对象，没有css("left", a)，应该obj = $('#'+id)

                头像
                djjkdnj
                  601513

                  你直接传id名就是对象了，不用再加引号，也不用再getElementById了,你在move函数里面console.log(idName)出来的就是<div id="div"></div>；另外obj是原生DOM对象,需要加上$，即调用css方法时将obj改成$(obj)

                  所以你的代码需要改两处，最终如下，应该是你要的结果：

                  var a=0;
function move(idName,time){
    
    var obj=idName;//直接传给obj
    var t=setInterval(function(){
       a=a+1;
        if(a<=200 && a>=0){
            $(obj).css("left",a);//使用$(obj)调用css方法
        }
        else{
            clearInterval(t);
        }
    },time)
}

move(div,1000);
                  头像
                  _旭_
                    663

                    move(div, 1000)？ div都没有定义吧好像。不应该是move('div', 1000)吗？

                    直接使用jquery的话，在move函数里边可以直接var obj = $('#' + idName);就O了。

                    不使用jquery的话也是可以的：var obj = document.getElementById(idName);
                    改变left值使用：obj.style.left = a + 'px';就可以了。

                    头像
                    呱呱呱
                      646211

                      你的想法是传入一个id，可是你传入的是一个未申明的变量
                      正确的做法是

                      move("div",1000)

                      或者

                      var nodeID = "div"
move(nodeID,1000)

                      另外你想打印：<div id="div"></div>的话
                      应该是

                      console.log(obj)
                      头像
                      kikong
                        19.1k31320
                        <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>定时器-移动</title>
  <script type="text/javascript" src="jquery-1.10.1.min.js"></script>
 </head>

<style>
 #div{width:100px;height:100px;background:red;position:absolute; top:100px;}
 
</style>
 <body>
  <div id="div"></div>
<script>
var a=0;
function move(idName,time){
    var id='"'+idName+'"';
//下行打印的id值为"[object HTMLDivElement]"，但是我实际想要的效果是<div id="div"></div>；
    console.log(id);
    var obj=document.getElementById(id);
    var t=setInterval(function(){
       a=a+1;
        if(a<=200 && a>=0){
            obj.css("left",a);
        }
        else{
            clearInterval(t);
        }
    },time)
}

move(div,1000);

</script>


 </body>
</html>

                        1.div变量对应为id属性值为div的HTML元素，如果你的把<div id="div"></div>改成<div id="div1234"></div>或<span id="div"></span> 看看效果
                        这是浏览器的行为，是一个很不好的行为，会引起代码混乱～～～
                        2.在浏览器行为下，传递了一个HTML元素给move函数,var id='"'+idName+'"';执行字符串拼接，HTML转成字符串[object HTMLDivElement]``

                        解决方法:
                        定义一个变量其值为对应的id值,消除变量歧义

                        var divIdName="div";
move(divIdName,1000);
                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题