JavaScriptでCSSのbackground-positionの値を取得

Tweet

IEとFirefoxで取得方法が異なる。
elem = document.getElementsById(“hoge”)
でエレメントを取得後、IEだと、
elem.currentStyle[“backgroundPositionX”]
elem.currentStyle[“backgroundPositionY”]
で、firefoxだと、
document.defaultView.getComputedStyle(elem, ”).getPropertyValue(“background-position”)
で、 “50% 50%”という感じで取得できるので、split等にて分割して取得。
下記のサンプルは、#hogeのbackground-positionのY軸が設定されていないか、0の場合、20px開始位置を下にずらす。

var elem = document.getElementsById("hoge");
if ( elem.currentStyle) {
// for IE
var bgPositionX = elem.currentStyle["backgroundPositionX"];
if ( elem.currentStyle["backgroundPositionY"] == "0%" ) {
elem.style.backgroundPosition = bgPositionX + " 20px";
}
} else if ( document.defaultView ) {
// for firefox
var bgPosition = document.defaultView.getComputedStyle(elem, '').getPropertyValue("background-position").split(" ");
if ( bgPosition[1] == "0%" ) {
elem.style.backgroundPosition = bgPosition[0] + " 20px";
}
}

Technoratiのタグ javascript, css, background-position, backgroundPosition