时间戳

首页 > 解决方案 > 如何通过 javascript 中的常见 html 类移动 css 元素？

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

问题描述

这里有点菜鸟！我在 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>

在这里，我为履带、底盘和炮塔创建了三个具有唯一 ID 的 div 元素。他们都共享普通级坦克。

.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';

因此，我尝试按班级移动整个坦克，但没有成功。我究竟做错了什么？

谢谢！

标签： javascripthtmlcss

解决方案

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

保持 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 来包含它们。然后在 tank.length（即 3）大于 i 时遍历数组，将 tank 元素移动 167px。由于 i 只能是 0、1 和 2，因此移动了 3 个元素（标记为 0、1 和 2）。

稍后如果您需要访问单个元素，您可以通过它们的 id 调用它们或在 tank 数组中找到它们，如下所示：tank[0]、tank[1] 或 tank[2]。

推荐阅读