写在前面:昨天在工作中,遇到了一个问题。感觉比较有用特地写下来。留作记忆!
昨天我想利用js获取div的background-image属性!于是我写了如下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript获取css样式</title>
<style>
.box{
width: 300px;
height: 200px;
background-image: url("images/1.jpg");
background-size: cover;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function(){
var oinline = oBox.style.backgroundImage;
alert(oinline);
}
}
</script>
</head>
<body>
<button id="btn">弹出样式</button>
<div class="box" id="box"></div>
</body>
</html>
chrome很礼貌的给我弹了一个下图:
啥玩意都没有!后来我将样式写到了行间。
<div class="box" id="box" style="background-image: url('images/1.jpg');"></div>
终于给我弹出我想要的了!后来在网上查到 这样的写法只能获取行间的样式。获取样式表里面的内容的话 需要 getComputedStyle()
然后,我去onclick函数的内容改了一下。如下
oBtn.onclick = function(){
// var oinline = oBox.style.backgroundImage;
var oinline = window.getComputedStyle(oBox,false).backgroundImage;
alert(oinline);
}
注意:我前面用的是window 不是document。 我因为这个还卡了一下。
现在终于可以弹出css里面的样式了。
前端开发人员都知道 这个世界上面有个叫IE的家伙,于是我去IE里面看了一下。
人家根本不是认识getComputerStyle()。后来查到,IE有个currentStyle()。废话不说,开撸!
oBtn.onclick = function(){
// var oinline = oBox.style.backgroundImage;
// var oinline = window.getComputedStyle(oBox,false).backgroundImage;
// alert(oinline);
var oinline = oBox.currentStyle.backgroundImage;
alert(oinline);
}
IE也很客气的弹了出来:
SO!问题来了!怎样整合到一起呢?
我自己用了整了一个这样的函数,就可以兼容二者。 当然三目运算会更简单。但是逻辑性不强!有兴趣的童鞋可以自己去试试!
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,false)[attr];
}else{
return ele.currentStyle[attr];
}
}
还有一个好东西,可以解决两者之间的兼容问题。那就是大名鼎鼎的jquery。ps:1.9版本之前
一句 $("ele").css("atrr")。即可!
最后我贴上自己的 代码连接。有兴趣的可以下载看看。试着获取background等其它属性。background-color......
顺便扯一句。因为IE不兼容background-size 所以需要在css里面写点代码去兼容IE。不知道的童鞋可以击我复制代码!
返回的路径太长,目前我还不知道怎么办?希望有知道的小伙伴 留言。谢谢!