使用 JavaScript 变量更改边距

Question

我试图在按下向上箭头键时更改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";

 }

网页/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>

Answer 1

getElementsByClassName返回一个HTMLCollection。 因此，您必须指定要工作的元素。

例如：

document.getElementsByClassName('player')[0].style.marginTop = playerPosition+".px";

Answer 2

document.getElementsByClassName('player')返回具有类player的元素（类似数组document.getElementsByClassName('player')的NodeList 。 您需要遍历列表并将样式更改应用于每个：

var players = document.getElementsByClassName('player');
for(var i = 0; i < players.length; i++)
    players[i].style.marginTop = playerPosition+"px";

或者我想如果你只有一个，将它应用到第0个元素。

小提琴

Answer 3

函数被称为“getElements [...]”，复数，因此它返回一个HTML元素数组，并提供类名。 此外，在条件语句中，您使用赋值运算符（=）而不是比较运算符（==）。 的jsfiddle

document.getElementsByClassName('player')[0].style.marginTop = playerPosition+"px";

Answer 4

document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
    document.getElementById("MyElement").classList.toggle('MyClass');

使用 JavaScript 变量更改边距

问题描述

4 个解决方案

解决方案1
1 2014-12-27 02:48:05

解决方案2
1 已采纳 2014-12-27 02:49:22

解决方案3
1 2014-12-27 02:55:34

解决方案4
0 2022-09-28 09:31:47

使用 JavaScript 变量更改边距

问题描述

4 个解决方案

解决方案1 1 2014-12-27 02:48:05

解决方案2 1 已采纳 2014-12-27 02:49:22

解决方案3 1 2014-12-27 02:55:34

解决方案4 0 2022-09-28 09:31:47

解决方案1
1 2014-12-27 02:48:05

解决方案2
1 已采纳 2014-12-27 02:49:22

解决方案3
1 2014-12-27 02:55:34

解决方案4
0 2022-09-28 09:31:47