通過javascript通過增量修改CSS背景位置

雖然我有很多PHP編程經驗，但對於使用JavaScript我很新，所以我希望這個問題不會變得愚蠢。通過javascript通過增量修改CSS背景位置

我的目標是創建一個按鈕，當按下按鈕時，定義的DIV對象中的背景位置將其背景位置改變一個像素。

我一直在搜索谷歌以及這個網站，特別是以下的提示，我發現我一直在玩javascript功能很多，但我似乎無法得到一個以我需要的方式工作。

我目前的化身看起來是這樣的：

<SCRIPT TYPE="text/javascript"> 
var xObject = 0; // Global 

function xMinus(ele) { 
    xObject-=1; 
    document.getElementById(ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' }); 
} 
</SCRIPT>

，其目的是在點擊按鈕（含的onclick =「JavaScript的：xMinus（‘DIVID’）;」）的背景應該轉移到由左一個像素。

但是，當我單擊它時，Error Console給我「錯誤：document.getElementById（ele）.css不是函數」。

我試過幾種不同的變化，但總是得到類似的結果，或者「變量未定義」。顯然我不知道我在做什麼。請幫忙！我爲朋友編碼，不想讓他們等待太久。

來源

2012-06-08 user1443628

Eh nvm我以前的評論，你試圖將jQuery方法'css'應用於標準DOM元素，該元素沒有該方法。 –

你在「ele」裏傳遞什麼？它應該是元素的'id'字符串，它不應以數字開頭。 –

你在ele內傳遞什麼？它應該是元素的id的字符串，它不應以數字開頭。

嘗試重寫代碼是這樣的：

var xObject = 0; // Global 

function xMinus(ele) { 
    xObject--; 
    $('#'+ele).css({ 'backgroundPosition': xObject + 'px ' + 0 + 'px' }); 
}

我希望你使用jQuery！ :)如果不使用jQuery，它應該是：

document.getElementById(ele).style.backgroundPosition = xObject + 'px ' + '0';

而對於處理程序，即<a>標籤，代碼應該是：（不應包含javascript:）

<a href="#" onclick="xMinus('id'); return false;">BG Left Push!</a>

來源

2012-06-08 04:07:12

我喜歡用戶如何看待'javascript = jQuery'的事實。但是，感謝上帝，你並沒有建議他使用32KB的jQuery代碼來做這件小事。 :) –

@RakeshJuyal當你看到他的代碼時，他使用'.css（）'，它是'jQuery Object'的一個函數。這就是我問他是否使用jQuery的原因。哪裏不對了？ –

html5 ID可以以數字開頭。（實際上至少_some_舊瀏覽器也支持它。） – nnnnnn

如果你不然後使用jQuery，

document.getElementById(ele).style.backgroundPosition = xObject + 'px ' +'0px';

來源

2012-06-08 04:11:36

這一個似乎也工作得很好！ – user1443628

+1稍微簡單一點就可以寫'... = xObject +'px 0px''，這樣可以節省加載數千行庫。 – RobG

通過javascript通過增量修改CSS背景位置

回答

相關問題