jquery background-position-x 问题答案

【问题标题】：jquery background-position-x issuejquery background-position-x 问题
【发布时间】：2012-03-01 05:31:22
【问题描述】：

在Jquery中怎么做background-position-x？

console.log($('.element').css('background-position-x'));

输出(an empty string)

console.log($('.element').css('background-position'));

输出0px 0px

我想做的是：

$(this).css('background-position-x', '-162px');

如何让它发挥作用？

非常感谢。

【问题讨论】：

您要获取值还是为其设置值？
设置一个值，但是如果我不能得到它很难设置，如果我尝试设置它就不起作用。
我不认为background-position-x 是一个标准，因此您用于测试的浏览器可能不支持它。

标签： javascript jquery

【解决方案1】：

基本上你得到并设置.css('backgroundPosition')，这是一个用空格分隔x和y的字符串，例如12px 14px。

在 Firefox、Chrome/Safari、Opera、IE7、IE8 中测试：

得到它

如果你只想要来自 jQuery 的 background-position-x：

var bpx = $('elem').css('backgroundPosition').split(' ')[0];

如果你只想要来自 jQuery 的 background-position-y：

 var bpy = $('elem').css('backgroundPosition').split(' ')[1];

如果你想要来自 jQuery 的 background-position-x 和 background-position-y：

var bp = $('elem').css('backgroundPosition').split(' ');
var bpx = bp[0], bpy = bp[1];

设置它

（如果您需要动画，请参阅Background Position animation in jQuery not working in Firefox）

只设置background-position-x而不更改background-position-y：

var bpy = $('elem').css('backgroundPosition').split(' ')[1];
$('elem').css('backgroundPosition', '-192px ' + bpy);

仅根据其旧值更改或增加background-position-x - 例如，将background-position-x 增加5px：

（这个简单的例子假设它是一个像素值，而不是像百分比这样的其他东西）

var bp = $('elem').css('backgroundPosition').split(' ');
var newBpx = (parseFloat(bp[0]) + 5) + 'px', bpy = bp[1];
$('elem').css('backgroundPosition', newBpx + ' ' + bpy );

【讨论】：

【解决方案2】：

background-position-x 不是标准的 css，并非所有浏览器都支持。看看Background Position animation in jQuery not working in Firefox的解决方案。

【讨论】：

好的，我在火狐上，这就解释了原因。谢谢，你知道怎么做吗？
只需将脚本复制/粘贴到该解决方案上，然后像往常一样使用它。
好的，非常感谢，但我会做一些更轻松的事情。

【解决方案3】：

的输出

$('elem').css('backgroundPosition');

或者更具体的

console($('elem').css('backgroundPosition');

发送到控制台将类似于

elem.backgroundPosition 50% 0%

同时分配 x 和 y 值的位置。要在 Firefox 中分配新值，您必须使用类似

$('elem').css('backgroundPosition','50% 50%');

更有可能的是，如果您需要设置像素尺寸，那么您可能会有类似的东西

$('elem').css('backgroundPosition','50% -100px');

这会将您的背景图像向上（负 y 方向）移动一百像素。

【讨论】：