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

【问题标题】：Modifying CSS background-position by increment via javascript通过javascript增量修改CSS背景位置
【发布时间】：2012-06-08 04:03:54
【问题描述】：

虽然我有丰富的 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 is not a function”。

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

【问题讨论】：

Eh nvm 我之前的评论，您正在尝试将 jQuery 方法 css 应用于没有该方法的标准 DOM 元素。
你在ele里面传递了什么？它应该是元素的id 的字符串，并且不应该以数字开头。

标签： javascript css onclick global-variables background-position

【解决方案1】：

如果你不使用jQuery，那么，

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

【讨论】：

+1 写... = xObject + 'px 0px' 可能会简单一点，这样可以省去加载几千行库。

【解决方案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>

【讨论】：

我喜欢用户对javascript = jQuery 的看法。但是，谢天谢地，你没有建议他使用 32KB 的 jQuery 代码来做这件小事。 :)
@RakeshJuyal 当你看到他的代码时，他使用了.css()，这是jQuery Object的一个函数。这就是我问他是否使用 jQuery 的原因。有什么问题吗？
html5 ids 可以以数字开头。（实际上，至少一些旧浏览器也支持它。）
@RakeshJuyal 那么 jQuery 就不需要了吗？
@user1443628 对于这个非常小的东西，是的，正如他所说，不需要 32KB 开销（包括 jQuery 库）。