jQueryでbackgroundPositionを取得するときの注意

$(‘hoge’).css(‘backgroundPosition’)だとIEで値が取れないんですね、不便か。

XとYを別々に取得したい

値の検証

var bgPosDef = $('#hoge').css('backgroundPosition');

IE8まで（9は未検証）

console: null（空）

Firefox, Chrome, Safari, Operaなど

console: 50px 50px

IEは返されるデータがない！こういうところがみんなが嫌いな所以ですかね。IEはbackgroundPositionではなくて、backgroundPositionXのようにXかYを指定して個別に引き抜きます。

var bgPosX = $('#hoge').css('backgroundPositionX');
var bgPosY = $('#hoge').css('backgroundPositionY');

XとYを取得する

計算を行う場合は、数値にしておく必要があるのでついでに。

var bgPos = bgPosDef.split(' '), // 半スペで分ける
  // bgPos[0] == X, bgPos[1] == Y
  bgPosX = 0,
  bgPosY = 0;
bgPosX = bgPos[0].replace('px', '');
bgPosY = bgPos[1].replace('px', '');
// pxを削除する

IEはpxを削るだけです。

bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');

条件分岐で分ける

var bgPosDef = $('#hoge').css('backgroundPosition'),
  bgPosX = bgPosY = 0;
if ( bgPosDef ) { // backgroundPositionの値が取れた場合
  var bgPos = bgPosDef.split(' '),
  bgPosX = bgPos[0].replace('px', '');
  bgPosY = bgPos[1].replace('px', '');
} else { // 取れなかった場合
  bgPosX = $('#hoge').css('backgroundPositionX').replace('px', '');
  bgPosY = $('#hoge').css('backgroundPositionY').replace('px', '');
}

これくらいはjQueryで対応してくれてもいいような気がしないでもない。。