我正在尝试更改 top margin 的值，当按下向上箭头键时代码对我来说似乎是正确的，但我不知道为什么它不会工作 !
JavaScript
var playerPosition = 0;
window.onkeyup = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if(key = 38) {
playerPosition += 10;
} else if(key = 40) {
playerPosition -= 10;
}
document.getElementsByClassName('player').style.marginTop = playerPosition+".px";
}
html/CSS
.mainDiv {
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
width: 600px;
height: 400px;
}
.player {
position: absolute;
background-color: #FFF;
width: 5px;
height: 70px;
margin: 20px 0 0 10px;
padding: 0 0 0 0;
}
.bar {
top: 30px;
height: 100%;
width: 5px;
border-style: dashed;
border-left: 5px;
border-color: #FFF;
position: fixed;
left: 50%;
}
.ai {
position: absolute;
right: 10px;
background-color: #FFF;
width: 5px;
height: 70px;
margin: 164px 0 0 10px;
padding: 0 0 0 0;
}
.ball {
position: absolute;
left: 50px;
bottom: 69px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #FFF;
}
</style>
<script src="sprite.js" defer="defer"></script>
</head>
<body>
<div class="mainDiv">
<div class="player"></div>
<div class="bar"></div>
<div class="ai"></div>
<div class="ball"></div>
</div>
</body>
</html>
最佳答案
document.getElementsByClassName('player') 返回具有类 player 的元素(类似数组)的 NodeList。您需要遍历列表并将样式更改应用于每个列表:
var players = document.getElementsByClassName('player');
for(var i = 0; i < players.length; i++)
players[i].style.marginTop = playerPosition+"px";
或者我猜如果你只有一个，将它应用于第 0 个元素。
关于javascript - 通过 JavaScript 使用变量更改边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27663912/