How to contol a CSS property with Javascript


Tags: javascript,css

Problem :

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 :-)



Solution :

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/


    CSS Howto..

    How to replace HTML text with images using CSS content cross browser

    How to change elevation property of paper-card?

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    How to use Materialize css Tabs in Meteor?

    How to change the navbar position? CSS & HTML

    How to get different class selectors using nth-child in css

    How to set background color of td in CSS

    how to apply the css style only to child

    How to remove a css class and add another when I get a certain mobile resolution

    How to add CSS files for different platform devices? [closed]

    CSS: How to scale an to cover entire parent
    ?

    How to create custom border style in JavaFX CSS?

    How can I avoid div from executing new line if one line is already full?

    How can I exclude certain elements from css property that has been applied to their parent without using the style attribute

    css resize: How to resize a dynamic growing div after max height is active

    How to add a delay between cycles of css animation [duplicate]

    Bootstrap: how to stack divs of different heights?

    How to target tablet devices with CSS queries

    Li tag is not aligning correctly in Chrome. How to fix it?

    How to override PrimeFace CSS to customize my button?

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    how can i force all rows in a table to have the same height

    How do I make my text disappear when I hover over my div?

    How can I opt out of a CSS style on a case-by-case basis?

    How do I position this image using CSS so it overlaps a div but displays inline?

    How to use 100% height with css

    css-how to set a three parallel DIV?

    how to create sprite with css [closed]

    How can I separate and make a menu with these links in CSS without using unordered lists [closed]

    How to get custom css to load after richfaces?