Невозможно контролировать свойство css bottom через javascript

Question

Итак, у меня есть один div и внутри него холст. из моего HTML файла:

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

из файла CSS:

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

Что я хочу сделать, это контролировать 'нижний' значение #game, которое:

($("#game").css("bottom")), 

Чтобы поместить его в оператор if и если true, его автоматически изменить.

Но когда я пытаюсь, есть проблема, которую я не могу понять. У меня есть переменная, называемая s. Где будет сумма, которую нужно изменить, это не фиксированный номер.

, когда я пытался ($("#game").css("bottom", -s)); ничего не произошло, так что проверить это я сделал следующее:

alert(($("#game").css("bottom", -s))); ответ был [объект Object].

в то время как если я просто сделаю alert(($("#game").css("bottom"))); ответ правильный 0px.

Что мне не хватает? Помощь будет очень признательна!

Answer 1

.css(name, value) установит свойство css name, равное value. Он не изменит значение, как делает x += 1 изменит переменную.

Поэтому вы должны делать что-то вроде:

var oldValue = parseInt($("#game").css("bottom")); 
$("#game").css("bottom", (oldValue - s) + "px") 

parseInt необходимо, потому что, как вы сказали, что возвращает 0px, который является строкой.

Answer 2

Вы можете изменить значение и установить в качестве:

$("div").on("click", function() { 
    $(this).css({ 
    height: function(index, value) { 
     return value * 1.2; 
    } 
    }); 
}); 

1.2 такой же, как r в вашем коде, когда вы нажимаете на DIV, то «ДИВ» высота автоматически увеличивается. Это может помочь вам.