javascript - 动态移动 DOM 元素位置

Question

我正在动态生成 span 并放置它们的位置:

        $('#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;

然后我有 setInterval() 函数，它应该通过调用 moveSpans() 每隔一段时间移动这些 DOM 跨度:

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

出于某种原因，附加的 DOM 跨度到 #myObstacles 不会改变位置。

这是为什么？

Answer 1

正如 Wlises 所说，您需要坚持使用 jQuery 方法或核心 JavaScript 方法；如果您使用的是 jQuery 对象(它在回调函数中以 val 的形式返回，如上例所示)，请坚持使用 jQuery 方法 .css()。

因此:

• 良好:val.css("top","-=10")
• 错误:val.style.top -= 10(这是原生 JavaScript 属性，但对于 jQuery 对象，没有样式 属性。只有 .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.