js設定元素background-position簡單介紹

本章節介紹一下如何使用javascript動態設定元素的background-position屬性。

因為存在著一定的瀏覽器相容問題，所以在相容低版本IE瀏覽器的時候要特別注意。

下面介紹一下相容性規則:

IE6/7/8: 使用backgroundPositionX/Y, 不識別backgroundPosition。

FireFox/Opera: 使用backgroundPosition, 不識別backgroundPositionX/Y。

Safari/Chrome: backgroundPosition和backgroundPositionX/Y都是可以的。

相容程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function getBackgroundPositionX(elem){
  var backgroundPositionX="";
  if(elem.currentStyle) {
    backgroundPositionX=elem.currentStyle.backgroundPositionX||document.defaultView.getComputedStyle(elem,null).backgroundPosition;
  }
  else if(document.defaultView) {
    backgroundPositionX=document.defaultView.getComputedStyle(elem,null).backgroundPosition;
  }
  backgroundPosition=parseInt(backgroundPosition);
  return backgroundPosition;
}

上面僅僅是水平方向的相容，當然垂直方向的相容也是同樣的道理。