如何在單擊按鈕時更改元素的背景位置

好的。我知道這個話題已經覆蓋了上百次。過去幾個小時我都試過了。。。實際上是在過去的幾天。我現在很生氣。很好，無論如何。我會請求幫助。如何在單擊按鈕時更改元素的背景位置

簡單的任務。單擊一個按鈕可更改對象的位置。我想實際上能夠點擊一個按鈕，然後將列表中的所有列表項目分散到關於該頁面的列表中......但是我覺得一旦我弄清楚瞭如何完成這個簡單的任務，我可以從中找出它。

老實說，我都試過了，我在網上看到的每一個代碼的變化。我不知道爲什麼它不適合我的工作，但我想那一定是因爲我搞亂了語法。

<p> I want to move this text </p> 
<input type = "button" value = "Click me"> 

<script type = "text/javascript" src = "js/jquery.js"></script> 

<script type = "text/javascript"> 
    $(':button').click(function() { 
    $('p').css({backgroundPosition: '100px 0px'}); 
}); 
</script>

。

我試圖消除大括號我嘗試其它的變化，包括：

<script type = "text/javascript"> 
$(':button').click(function() { 
$('p').css('backgroundPosition', '-100px 0px'); 
}); 
</script>

無數小時在這裏和其他地方尋找解決這個簡單的問題。

我想要的只是f'ing語法。我可以很容易地改變背景顏色，但位置有兩個座標來改變，我不知道爲什麼我嘗試過的東西都沒有工作。

感謝您的幫助提前。

來源

2012-01-12 Dan Dao

你可以把這個http://jsfiddle.net – redmoon7777 2012-01-12 04:40:38

請參閱本 http://stackoverflow.com/questions/2515423/jquery-change-css-background-position-and-mouseover-mouseout – Murtaza 2012-01-12 04:40:47

你試圖移動文字或一些背景圖片？ – redmoon7777 2012-01-12 04:41:29

該錯誤不在您的jQuery中，該代碼是正確的。這個問題似乎出現在你的CSS屬性中。考慮你的代碼的以下變化。

$(':button').click(function() { 
    $('p').css({'background-color': 'blue'}); 
});

這裏我改變了CSS來更新背景顏色與位置。這只是正常，並表現在以下小提琴

小提琴：http://jsfiddle.net/7TuVx/

我會直接套用CSS的p對象，看看你有什麼需要得到它移動到合適的位置，然後更新您的jQuery代碼相應

來源

2012-01-12 04:40:48 JaredPar

<script type = "text/javascript"> 
    $(':button').click(function() { 
     $('p').css('background-position', '-100px 0px'); 
    }); 
</script>

您拼錯了css屬性。

來源

2012-01-12 04:41:48

backgroundPosition引用設置爲元素背景的圖像的位置。改變這一點不會移動你的<p>標籤。要移動元素，您應該是left和top，但您還需要將position設置爲相對或絕對。

來源

2012-01-12 04:48:28

感謝所有幫助過我的人。 – 2012-01-12 05:43:49

這就是我最終使用的。（）： $（'：button'）。click（function（）{$（「p」）。offset（{top：100，left：30}）; }）; 是的，這不是我後面的背景位置。我真正想要修改的是元素的左側和頂部屬性。所以這不是語法問題......它是財產本身。難怪！ – 2012-01-12 05:46:38

如何在單擊按鈕時更改元素的背景位置

回答

相關問題