使用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屬性

回答

相關問題