jquery background-position-x问题

Question

如何在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');

如何让它发挥作用？

非常感谢。

Answer 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 );

Answer 2

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

Answer 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方向）一百个像素。