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で対応してくれてもいいような気がしないでもない。。
