如何使用 jQuery 在 Firefox 中获取 background-position-y？答案

【问题标题】：How do I get the background-position-y in firefox using jQuery?如何使用 jQuery 在 Firefox 中获取 background-position-y？
【发布时间】：2011-10-12 21:35:12
【问题描述】：

$(elem).css('backgroundPositionY')

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

编辑：Tell Mozilla 你想要background-position-[x,y] 支持。（使用“投票”功能，而不是评论，除非您有先见之明要添加）。自 2010 年以来（现在 3 年），Bug 已经开放，所以不要屏住呼吸进行修复。 :)

【问题讨论】：

标签： javascript jquery css firefox

【解决方案1】：

不幸的是，某些浏览器（例如 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];     
}

【讨论】：

【解决方案2】：

建立在红杉麦克道尔的答案基础上，你也可以这样做

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

【讨论】：

【解决方案3】：

这是我的 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 数字。

【讨论】：

我打你是因为我作弊。 :p 在发布问题之前我就知道答案了。有一个很好的投票！我可以推荐 parseFloat() 从字符串中提取数字吗？它比正则表达式更整洁。
因为数字并不总是可取的：var x = Number(1);与 var x = 1 不完全相同；可以改为 var y = +(displacement[1].replace(/[^0-9/g,''));
.replace(/[^0-9-]/g, '') 会将 23.34534% 转换为 2334534。我确信这不是预期的行为。添加 ”。”你的表情。 .replace(/[^0-9-.,]/g, '') 现在 23.34534% 会给你 23.34534

【解决方案4】：

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

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

【讨论】：

我已经读到，如果您自己想出一些东西并想分享，这就是您应该发布的方式，我希望这是犹太教！如果我这里不正确，请删除。
打败我，哇。我必须做一些试验以确保它能够正常工作。
好的，已经过了几个星期，没有更好的答案。虽然感觉有点脏，我会继续接受我自己的答案。