javascript - 如何使用 Javascript 控制 CSS 属性

Question

好的，所以我有一个 div，里面有一个 Canvas :我的 html 文件:

<div id="container">
        <canvas id="game" width="600px" height="2000px">
</div>

我的 CSS 文件:

#game{
background: -moz-linear-gradient(top, #00b7ea0%, #008793 14%, #04b9b 43%, #1f00ea 74%, #008793 89%, #009ec3 100%);
bottom: 0px;
position: absolute;    
}
#container{
position: relative;
width:600px;
height:500px;    
}

这是我的问题:如果我想控制#game 的底部属性，应该在 javascript 文件中使用什么代码？

我的意思是我希望用户按下一个按钮，例如W(=87)，和bottom属性改变负方向或正方向无关，需要编写一个代码，当按下一个键时，bottom属性的大小会改变。

我希望我对探测器的描述很好，如果需要更多信息，请询问...期待回复:-)

Answer 1

如果你想动态设置 bottom 属性，你可以按如下方式进行 -

function setHeight (bottomValue) {
    if (typeof bottomValue === "number") {
        bottomValue = bottomValue + "px";
    }

    var gameElement = document.getElementById("game");

    if (gameElement) {
        gameElement.style.bottom = bottomValue;
    }
}

参见 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

或者使用 jQuery-

$('#game').css('bottom', bottomValue);

参见 http://api.jquery.com/css/