使用jQuery设置CSS属性

有史以来第一次发布到Stackoverflow和编码newb。我见过很多人用jQuery成功设置CSS属性的例子。然而，经过许多令人沮丧的时间之后，我仍然没有看到什么明显的错误。这是我非常简化的代码。我知道如果我手动将这个属性添加到CSS，它会产生所需的效果。但是，我无法让它使用jQuery工作。任何帮助或建议将不胜感激。我觉得这应该是如此明显，但我没有看到它。使用jQuery设置CSS属性

我使用回报率（我已经包括// =需要app.js的jQuery）

CSS

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

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

我也尝试过的几次迭代jQuery和JS包括但不限于...

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

和

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

和

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

即使文件表明，所有数字将变成一个字符串，并假定为像素。

来源

2016-03-22 Ginzmo

欢迎！请向我们展示html。它可能就像你尝试应用样式的div元素上的一个不正确的ID一样简单！ –

当你定义'buttonPointer'时，你确定'magicaldiv'存在吗？如果javascript在html之前加载，并且不在'document.ready'调用中打包，则不起作用。 – flyingL123

@ flyingL123 - 这也是我的下一个评论。你的脚本或者需要放在页面的页脚中，或者它需要像这样打包：'jQuery（function（$）{....你的脚本在这里...}）;' - 这被称为[文档准备]（https://learn.jquery.com/using-jquery-core/document-ready/）函数。 –

根据源代码的顺序，您可能需要将buttonPointer定义包装为调用document.ready。

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

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

$(window).resize(updatePointer);

来源

2016-03-22 23:31:05 flyingL123

所以我的基本理解是，高于收益率的任何东西都会在所有js之前加载。显然我错了。谢谢！ – Ginzmo

没问题。欢迎来到SO。 – flyingL123

使用jQuery设置CSS属性

回答

相关问题