JavaScript獲取背景圖片定位值

admin發表於2018-09-21
JavaScript

設定元素背景圖片的時候，可以為背景圖片定位，程式碼如下:

[CSS] 純文字檢視 複製程式碼
background:url(img/1.jpg) 20px 50px;

那麼該如何獲取20px和50px值呢，下面通過程式碼例項做一下簡單介紹。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#antzone{
  background:url(img/1.jpg) 20px 50px;
  width:200px;
  height:100px;
}
</style>
<script type="text/javascript">
function getStyle(obj,attr){
  var ie = !+"\v1";
  if(attr=="backgroundPosition"){
    if(ie){        
      return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;
    }
  }
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }
  else{
    return document.defaultView.getComputedStyle(obj,null)[attr];
  }
}
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var oshow=document.getElementById("show");
  oshow.innerHTML=getStyle(odiv,"backgroundPosition");
}
</script>
</head>
<body>
<div id="antzone"></div>
<div id="show"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function getStyle(obj,attr){}，獲取指定CSS屬性值，第一個引數是元素物件，第二個是樣式屬性。

（2）.var ie = !+"\v1"，可以判斷IE6-IE8瀏覽器。

（3）.if(attr=="backgroundPosition"){

  if(ie){

    return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;

  }

}，如果要獲取元素背景圖片的定位值，IE6-IE8不支援"backgroundPosition"方式，要用backgroundPositionX和backgroundPositionY。

（4）.if(obj.currentStyle){

  return obj.currentStyle[attr];

}else{

  return document.defaultView.getComputedStyle(obj,null)[attr];

}，除了backgroundPosition，可以相容所有主流瀏覽器獲取元素樣式屬性的方式。

二.相關閱讀:

（1）.getComputedStyle()參閱getComputedStyle() 用法一章節。

（2）.innerHTML屬性參閱JavaScript innerHTML一章節。

相關文章