使用jQuery设置CSS属性

Question

第一次发布到Stackoverflow并编码newb。 我看过很多例子，其中人们已经使用jQuery成功设置了CSS属性。 但是，经过许多令人沮丧的时间，我仍然没有看到明显的问题是什么。 这是我非常简化的代码。 我知道，如果我将此属性手动添加到CSS，它将具有预期的效果。 但是，我无法使其使用jQuery。 任何帮助或建议，将不胜感激。 我觉得这似乎很明显，但我看不到。

我正在使用RoR（并且我已经在app.js中添加了// = require jquery）

CSS

    #magicaldiv{
                margin-left: -175px;
                margin-top: -20px;
                width:350px;
                height:40px;
                position:absolute;}

JS

     var buttonPointer = $('#magicaldiv');
     $(document).ready(updatePointer);
     $(window).resize(updatePointer); 
     function updatePointer(){
                              buttonPointer.css('left', 200);}

我还尝试了jQuery和JS的多次迭代，包括但不限于..

JS

     document.getElementById("magicaldiv").style.left = 200;

和

     var left = 200 + "px";
     buttonPointer.css('left', left);

和

     buttonPointer.css('left', '200px');

即使文档建议将所有数字都转换为字符串并假定为px。

Answer 1

您可能需要将buttonPointer定义包装在document.ready调用中，具体取决于源代码的顺序。

var buttonPointer;
function updatePointer(){
  buttonPointer.css('left', 200);}

$(document).ready(function() {
  buttonPointer = $('#magicaldiv');
  updatePointer();
});

$(window).resize(updatePointer);