js如何获取css里面的样式兼容IE

写在前面：昨天在工作中，遇到了一个问题。感觉比较有用特地写下来。留作记忆！

昨天我想利用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。不知道的童鞋可以击我复制代码！

返回的路径太长，目前我还不知道怎么办？希望有知道的小伙伴留言。谢谢！

沈志勇说

发布了47 篇原创文章 · 获赞 61 · 访问量 13万+

私信关注

js如何获取css里面的样式 兼容IE

猜你喜欢

js如何获取css里面的样式兼容IE