How to contol a CSS property with Javascript

Question

Ok so i have one div and inside it a canvas: my html file:

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

my css file:

#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;    
}

And here is my question: What code should be used in a javascript file, if i want to control the bottom property of #game?

What i mean i that i want the user to press a botton, e.g. W(=87), and the bottom property to change negative or possitive direction is irrelevant, the need is to make a code that when a key is pressed the magnitude of the bottom property will change.

I hope that i described the probel well, if more info is needed please ask... Looking forward for a reply :-)

I haven't really used canvas's but I would assume it's the same as any other tag. You can refer to the style property: document.getElementById('game').style.bottom = "20px";. There is a little more to it. You would need to get the existing value. You can parse it with parseInt(), then increment or decrement as needed, then set the value. — jwatts1980
– jwatts1980, Commented Aug 26, 2014 at 19:11
@Derek that is a jQuery solution. The OP didn't tag jQuery in the question. — jwatts1980
– jwatts1980, Commented Aug 26, 2014 at 19:12
Also, you may need to look into the keyboard events like onkeyup, onkeypress, and onkeydown. They each have slightly different uses and event return values. — jwatts1980
– jwatts1980, Commented Aug 26, 2014 at 19:15

pwdst · Accepted Answer · 2014-08-26 20:28:04Z

1

If you want to set the bottom property dynamically you can do this as follows-

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

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

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

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

Alternatively using jQuery-

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

See http://api.jquery.com/css/

edited Aug 26, 2014 at 20:28

answered Aug 26, 2014 at 19:28

pwdst

13.9k4 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anamed Over a year ago

out of curiosity: shouldn't the 'css' in $('#game').css('css', bottomValue); be 'bottom'??? Also using JQuery how bottomValue would be modified?

pwdst Over a year ago

Thanks @Anamed - I was typing this answer using the StackExchange app on my tablet which I don't think I'll do again. Laptop is much better both in terms of console access to test and in terms of formatting/typing. To answer your question about modifying the value in the case of jQuery - you don't have to. The method accepts a number value - see the documentation. I've created a fiddle at jsfiddle.net/pwdst/bs4xknvk to show changing the bottom property with just a number value.

Steve · Accepted Answer · 2014-08-26 19:19:11Z

1

Using jQuery you could add the following code to your key press handler:

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

If you are not using jQuery I would do something like:

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

answered Aug 26, 2014 at 19:19

Steve

864 bronze badges

1 Comment

jwatts1980 Over a year ago

As a general rule of thumb, don't include answers using frameworks that the OP has not tagged or referenced in the question. In this case, the OP did not tag or reference the jQuery framework.

Collectives™ on Stack Overflow

How to contol a CSS property with Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related