移动DOM元素位置动态

我动态生成的跨度，并把他们的位置为这样：移动DOM元素位置动态

 $('#myObstacles').append("<span id=\"" + test + randX + "\">" + items[randObj] + "</span>"); 
     document.getElementById("test"+randX).style.position="absolute"; 
     document.getElementById("test"+randX).style.left=randX; 
     document.getElementById("test"+randX).style.top=randY;

然后，我有应该将这些DOM setInterval()函数调用moveSpans()跨越每隔一段时间：

function moveSpans() { 
     $("#myObstacles span").each(function (index, val) { 
      val.style.top-=10; 
     }); 
    }

由于某些原因，附加的DOM跨度为#myObstacles不会更改位置。

这是为什么？

来源

2014-02-22 Growler

在 “功能（索引，VAL）” 中的 “VAL” 是一个jQuery对象，尝试：

function moveSpans() { 
    $("#myObstacles span").each(function (index, val) { 
     $(val).css({top: -10}); 
    }); 
}

来源

2014-02-22 17:33:44 wrivas

我没有把'css top'设置为10 px，我想递增地将它向上移动10px。所以像'.css（{top- = 10}）''？ – Growler

'$（val）.css（“top”，“ - = 10”）'This works – Growler

正如Wlises说，你需要坚持使用jQuery方法或核心JavaScript方法;如果你使用的是一个jQuery对象（在上面的回调函数中以val的形式返回），请使用jQuery方法.css()。

因此：

GOOD：val.css("top","-=10")
BAD：val.style.top -= 10（这是一个原生的JavaScript性能，但对jQuery的对象，没有style财产，唯一的.css()访问。 /增变器法）

由于您试图减量top由10px的，是可以接受的使用方法：val.css("top","-=10")

这里有一个解释直接从jQuery的文档：

As of jQuery 1.6, .css() accepts relative values similar to .animate() . Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css("padding-left", "+=15") would result in a total padding-left of 25px.

来源

2014-02-22 17:42:13

Thank you，but'val.css（“top”，“ - = 10”）;'in'$ .each '不起作用，给出错误'Uncaught TypeError：Object＃在控制台中没有方法'css'' – Growler

你试过吗？

function moveSpans() { 
    $("#myObstacles span").each(function (index, val) { 
     var $el = $(val) 
     $el.css({top: $el.css("top")-10}); 
    }); 
}

来源

2014-02-22 18:03:00

移动DOM元素位置动态

回答

相关问题