Question

这里有点菜鸟！我正在HTML和CSS的帮助下使用纯JavaScript，没有引擎。我正在尝试移动显示的坦克精灵，它由3个部分组成：轨道，底盘和炮塔。

<!DOCTYPE html>

<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <link rel='stylesheet' href='.css'>
        <div class='tank' id='tracks'></div>
        <div class='tank' id='chasis'></div>
        <div class='tank' id='turret'></div>
    </head>
    <body>
        <script src='.js'></script>
    </body>
</html>

在这里，我创建了三个div元素，它们具有用于轨道，底盘和转塔的唯一ID。他们都共享普通坦克。

.tank {
    height: 31px;
    width: 31px;
    position: absolute;
}

#tracks {
    background: url("tracks.png");
}

#chasis {
    background: url("chasis.png");
}

#turret {
    background: url("turret.png");
}

在我的CSS代码中，我将这3个组件共享的所有属性都归于其类，因此它们共享相同的大小和位置。由于这三个元素中的每一个都有一个无法共享的唯一图像，因此我通过id将其归因于每个元素。

var tracks = document.getElementById('tracks');
var chasis = document.getElementById('chasis');
var turret = document.getElementById('turret');

tracks.style.top = '167px';
chasis.style.top = '167px';
turret.style.top = '167px';

此代码之所以成功，是因为它成功地将每个组件向下移动了167px，但我想避免每次我想按其组件移动储罐时都重写所有内容。

var tank = document.getElementsByClassName('tank');

tank.style.top = '167px';

因此，我尝试按班级移动整个战车，但没有成功。我在做什么错了？

谢谢！

Answer 1

尝试将div放在主体部分，将js放在头部部分。

还要在类中添加[0]，如下所示：

var tank = document.getElementsByClassName('tank')[0];

编辑原因，因为我意识到他们不在Nex建议的坦克级别的div中

Answer 2

<div class="tank">
        <div id='tracks'></div>
        <div id='chasis'></div>
        <div id='turret'></div>
</div>

您可以尝试一下吗？所以您有了现在包含所有零件的TANK。

Answer 3

getElementsByClassName，它以对象格式返回节点列表。因此，您不能直接在其上应用样式。您需要使用数组函数遍历列表。要获取数组列表，可以使用querySelectorAll。

const tanks = document.querySelectorAll('.tank');
tanks.forEach(function(tank, index){
  tank.style.marginTop = '167px';
});

<div class="tank">1</div>
<div class="tank">2</div>

Answer 4

好的，我想我找到了另一种方法来实现这一目标：

将html和CSS保持不变。

var tracks = document.getElementById('tracks');
var chasis = document.getElementById('chasis');
var turret = document.getElementById('turret');

var tank = [tracks, chasis, turret];

for (var i = 0; i < tank.length; i++) {
   tank[i].style.top = '167px';
}

报废js并扔进上面。

通过元素的ID调用元素，并创建一个包含它们的数组容器。然后在tank.length（为3）大于i的同时循环遍历数组，将tank元素移动167px。由于我只能是0、1和2，因此将移动3个元素（标记为0、1和2）。

稍后，如果您需要访问奇异元素，则可以通过它们的ID对其进行调用，或在tank数组中找到它们，例如：tank [0]，tank [1]或tank [2]。

如何通过javascript中常见的html类移动css元素？

4 个答案: