Question

我需要帮助用id“playerSprite”更改每个img元素。在按键事件中，所有带有playerprite id的元素都需要从顶部样式中减去16px。

代码：

if (evt.keyCode == 38) {
    document.getElementById("playerSprite")style.top -16px;
}

HTML：

<img src="images/test.png" id="playerSprite" style="position: absolute; top: 136px; left: -176px;">
<img src="images/test2.png" id="playerSprite" style="position: absolute; top: 136px; left: -176px;">

如何使这个工作？

Answer 1

使用jquery。这应该有效。

if (evt.keyCode == 38) {
    $("img").css("top","-16px");
}

编辑：您不能拥有多个具有相同ID的图像，因此如果您需要某些图像选择，请为它们指定相同的类并将“img”更改为“.class”

Answer 2

我建议你做一个refacor。给你的图像一个类playerSprite（id必须是唯一的）然后

   $(".playerSprite").each(
        function(i,elem) { 
          // to get top value use $(elem).css('top');
          $(elem).css('top','yourValue + px') 
    });

HTML

<img src="images/test.png" id="playerSprite1" class="playerSprite" style="position: absolute; top: 136px; left: -176px;">
<img src="images/test2.png" id="playerSprite2" class="playerSprite" style="position: absolute; top: 136px; left: -176px;">

Answer 3

将ID“playerSprite”更改为类，然后更改JS以按类获取图像并为每个图像创建一个循环：

elements = document.getElementsByClassName('playerSprite');

for (var i = 0, ii = elements.length; i < ii; i++) {
    elements[i].style.top = (parseInt(elements[i].style.top) - 16) + 'px';
}

小提琴： http://jsfiddle.net/Niffler/SL8LA/

Answer 4

id必须是唯一的。改为使用类名。

像这样： els = document.getElementsByClassName（“playerSprite”）;

然后必须遍历所有元素并设置样式。

loop els：＆lt; - 可以使用for循环 els [i] .style.top = '26px';

Answer 5

是的，id应该是独一无二的，你可能会想要使用类而不是id。

因此，假设您使用的类名是player-sprite，并且您使用的是现代版本的jQuery（1.6）。然后你可以这样做：

$('img.player-sprite').css('top', '-=16');

请参阅http://api.jquery.com/css/

改变多个div id的风格

5 个答案: