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

Question

虽然我在PHP编码方面有很多经验，但我对使用javascript很陌生，所以我希望这个问题不会变得愚蠢。

我的目标是创建一个按钮，当按下该按钮时，该按钮会导致定义的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'）;"），背景应该向左移动一个像素。

但是，目前当我单击它时，错误控制台会给我"错误：document.getElementById（ele）.css不是函数"。

我尝试了几种不同的变体，但总是得到类似的结果，或者"变量未定义"。显然我不知道我在做什么。请帮忙！我正在为朋友编码，不想让他们等待太久。

Answer 1

如果你不使用jQuery，那么，

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

Answer 2

你在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>