Question

我有一组图像对象：

var pics = ["pic1","pic2","pic3","pic4","pic5","pic6"]

我想循环并将style.left值设置为比当前值小10。我试过了：

for (i = 0; i < 6; i++) { 
pics[i].style.left=pics[i].style.left-10
}

但这似乎不起作用。我需要做什么？

Answer 1

你有一个字符串数组，而不是一个元素数组。如果这些是ID，您可以使用getElementById()将字符串ID转换为元素：

for (i = 0; i < 6; i++) { 
    var image = document.getElementById(pics[i]);
    image.style.left=image.style.left-10
}

此外，您可以稍微改进一下代码，请考虑：

// Use pics.length instead of hardcoding the array length here.
// This way if you add/remove element later, you won't need to
// update this loop.
for (i = 0; i < pics.length; i++) { 
    var image = document.getElementById(pics[i]);
    image.style.left=image.style.left-10
}

作为旁注，您还需要记住，应该执行此代码only after DOM is available否则getElementById()将返回null。

Answer 2

您可以使用css实际解决问题，而不是考虑使用javascript解决问题。只需将公共类应用于这些图像元素，并应用以下样式：

.myImg{
     margin-left: -10px;
}

或

.myImg{ transform: translate(-10px, 0px); }

这将从已应用的10px css属性向后移动图像left。（我希望您尝试使用javascript，即减去-10 ）。

Answer 3

样式对象中的left属性仅适用于DOM节点。

在您提供的示例中，您只有一个字符串数组，但即使它是图像对象，它也不会起作用。您可以像这样创建DOM节点：

var image = document.createElement("img")
image.style.left = "10px"

但请务必始终尝试使用CSS而不是JavaScript修复视觉问题。

设置存储在数组中的对象的属性

3 个答案: