这里有点菜鸟!我在 HTML 和 CSS 的帮助下使用纯 javascript，没有引擎。我正在尝试移动由 3 个部分组成的显示坦克 Sprite :履带、底盘和炮塔。
<!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。他们都共享公共(public)类 tank。
.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';
这段代码成功地将每个组件向下移动了 167 像素，但我想避免在每次要按其组件移动坦克时重写所有代码。
var tank = document.getElementsByClassName('tank');
tank.style.top = '167px';
因此，我尝试按类别移动整个坦克，但没有成功。我做错了什么？
谢谢!
最佳答案
<div class="tank">
<div id='tracks'></div>
<div id='chasis'></div>
<div id='turret'></div>
</div>
你能试试这个吗？所以你现在有了 TANK，里面有所有的零件。
关于javascript - 如何通过 javascript 中的通用 html 类移动 css 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51336052/