Question

好的，所以我有一个div，里面有一个画布：我的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），并且改变负方向或正方向的底部属性是无关紧要的，需要制作一个代码，当按下一个键时，底部属性的大小会发生变化。

我希望我能很好地描述这个问题，如果需要更多信息请问... 期待回复： - ）

Answer 1

使用jQuery，您可以将以下代码添加到按键处理程序中：

var newBottomValue = 13;
$("#game").css("bottom", newBottomValue);

如果您不使用jQuery，我会做类似的事情：

var newBottomValue = 13;
document.getElementById("game").style.bottom = newBottomValue + "px";

Answer 2

如果要动态设置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/

如何使用Javascript控制CSS属性

2 个答案: