通过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背景位置

回答

相关问题