Question

$(elem).css('backgroundPositionY')

在chrome上运行，即和safari，但不是Firefox（也不是我认为的Opera）。您认为jQuery会有一个polyfill，但它不会，从1.5开始。如何轻松获取背景Y位置，例如背景动画（例如视差）？

编辑：Tell Mozilla您需要background-position-[x,y]支持。（使用“投票”功能，而不是评论，除非你有一些有先见之明的东西可以添加）。 Bug从2010年开始（现在已经3年）了，所以不要屏住呼吸修复。：）

Answer 1

var backgroundPos = $(elem).css('backgroundPosition').split(" ");
//now contains an array like ["0%", "50px"]

var xPos = backgroundPos[0],
    yPos = backgroundPos[1];

Answer 2

这是我的hacky解决方案：

var $jQueryObject = jQuery('#jQueryObject');
var backgroundPosition = $jQueryObject.css('background-position');
// backgroundPosition = "0% 0%" for example
var displacement = backgroundPosition.split(' '); // ["0%", "0%"]
var y = Number(displacement[1].replace(/[^0-9-]/g, ''));

// As suggested, you could also get the float:
var yFloat = parseFloat(displacement[1].replace(/[^0-9-]/g, ''));

此处y将是一个数字，可能是百分比或像素偏移，具体取决于您的情况。我做了一个小正则表达式来摆脱非数字字符，这样你就可以得到一个javascript数字。

Answer 3

不幸的是，某些浏览器（例如Chrome）将css('background-position')或css('backgroundPosition')报告为left <x> top <y>，而其他浏览器（Internet Explorer，Firefox，Opera）将其报告为<x> <y>。以下对我有用：

var x, y, pos = $(elem).css('background-position').split(' ');

if(pos[0] === 'left') {
  x = pos[1];
  y = pos[3];
} else {
  x = pos[0];
  y = pos[1];     
}

Answer 4

建立红杉mcdowell的答案你也可以做到

var yPos = $(elem).css('backgroundPositionY');

如何使用jQuery在firefox中获取background-position-y？

4 个答案: