无法通过javascript控制css底部属性

Cannot control css bottom property via javascript

本文关键字：css 底部 属性 控制 javascript      更新时间：2023-09-26

好的，我有一个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的变量。其中s是应该更改的金额，它不是一个固定的数字。

当我尝试($("#game").css("bottom", -s));时什么都没发生，所以为了检查它，我做了以下操作：

alert( ($("#game").css("bottom", -s)) );的回复是[object object]。

而如果我只做alert( ($("#game").css("bottom")) );，则回复正确为0px。

我错过了什么？非常感谢您的帮助！

.css(name, value)将name的css属性设置为等于value。它不会像执行x += 1会更改变量那样更改值。

因此，你应该做这样的事情：

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

parseInt是必要的，因为正如您所说，它返回0px，这是一个字符串。

您可以更改值并设置为：

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

1.2与代码中的r相同，当您单击div时，"div"高度会自动增加。它可能会帮助你。

相关文章：