IE8和IE7如何获取background-position属性值:
之所以要单独介绍一下如何获取background-position属性值，是因为在IE8和IE8以下浏览器中存在一定的兼容性问题，下面对此做一下简单介绍，希望能够给需要的朋友带来帮助。
一.使用style方式:
此方式只能够获取使用style方式定义的css样式属性，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#thediv{
width:100px;
height:100px;
background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var thediv=document.getElementById("thediv");
thediv.innerHTML=thediv.currentStyle["backgroundPosition"];
}
</script>
</head>
<body>
<div id="thediv" style="background-position:10px 20px">蚂蚁部落</div>
</body>
</html>
以上代码在所有的主流浏览器都能够正确获取到background-position属性值，说明此种方式没有兼容问题。
二.获取样式表定义的属性:
如果css属性是在样式表中定义的，那么使用style方式就无能为力了，则需要更换方法，具体可以参阅getComputedStyle()和currentStyle属性的用法一章节，但是对于background-position属性要特别的小心，因为在IE8和IE8以下浏览器中并不支持backgroundPosition这种方式，而是支持backgroundPositionX和backgroundPositionY属性，所以要进行一下兼容性处理，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#thediv{
width:100px;
height:100px;
background-color:green;
background-position:10px 20px
}
</style>
<script type="text/javascript">
function getStyle(obj,attr){
if(obj.currentStyle){
if(attr=="backgroundPosition"){
return obj.currentStyle.backgroundPositionX +" "+obj.currentStyle.backgroundPositionY;
}
else{
return obj.currentStyle[attr];
}
}
else{
return document.defaultView.getComputedStyle(obj,null)[attr];
}
}
window.onload=function(){
var thediv=document.getElementById("thediv");
thediv.innerHTML=getStyle(thediv,"backgroundPosition")
}
</script>
</head>
<body>
<div id="thediv">蚂蚁部落</div>
</body>
</html>
以上代码实现了我们的要求，可以实现各个浏览器兼容。
相关阅读:
1.getComputedStyle()和currentStyle可以参阅getComputedStyle()和currentStyle属性的用法一章节。
2.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11712
更多内容可以参阅:http://www.softwhy.com/javascript/
时间： 2024-10-10 02:40:05