jquery background-position-x问题

如何在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

background-position-x不是标准的css，并不适用于所有浏览器。 看看jQuery中的背景位置动画解决方案在Firefox中不起作用 。

Answer 2

基本上你得到并设置.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]; 

设置它

（如果你需要动画，请参阅jQuery中的背景位置动画在Firefox中不起作用 ）

仅在不更改background-position-y情况下设置background-position-x ：

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