如何在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>在这里，我创建了三个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';因此，我试着按类别移动整个坦克，但没有起作用。我做错了什么？
谢谢!
回答 4
Stack Overflow用户
发布于 2018-07-14 14:57:56
尝试将div放在body部分，将js放在head部分。
将a添加到类中，如下所示：
var tank = document.getElementsByClassName('tank')[0];编辑因为我意识到它们并不在Nex建议的带有坦克类的div中
Stack Overflow用户
发布于 2018-07-14 14:59:36
<div class="tank">
<div id='tracks'></div>
<div id='chasis'></div>
<div id='turret'></div>
</div>你就不能试试这个吗？所以你有一个水箱，里面有所有的部件。
Stack Overflow用户
发布于 2018-07-14 14:59:48
getElementsByClassName，则以Object格式返回节点列表。所以你不能直接在它上面应用样式。您需要使用数组函数遍历列表。要获取数组列表，可以使用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>
https://stackoverflow.com/questions/51336052
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号