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

Dear 丶 2022-07-14 05:50 189阅读 0赞

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

昨天我想利用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很礼貌的给我弹了一个下图：

![20161129184135492][]

啥玩意都没有！后来我将样式写到了行间。

终于给我弹出我想要的了！后来在网上查到 这样的写法只能获取行间的样式。获取样式表里面的内容的话 需要 getComputedStyle()

![20161129184141164][]

然后，我去onclick函数的内容改了一下。如下

oBtn.onclick = function(){
    // var oinline = oBox.style.backgroundImage;
    
    
    var oinline = window.getComputedStyle(oBox,false).backgroundImage;
    alert(oinline);
    }

***注意：我前面用的是window 不是document。 我因为这个还卡了一下。***

现在终于可以弹出css里面的样式了。

![20161129185929857][]

前端开发人员都知道 这个世界上面有个叫IE的家伙，于是我去IE里面看了一下。

![20161129190149455][]

人家根本不是认识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也很客气的弹了出来：

![20161129190735442][]

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")。即可！

最后我贴上自己的 [ 代码连接][Link 1]。有兴趣的可以下载看看。试着获取background等其它属性。background-color......

顺便扯一句。因为IE不兼容background-size 所以需要在css里面写点代码去兼容IE。不知道的童鞋可以[击我复制代码！][Link 2]

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

[20161129184135492]: /images/20220714/9dcf0794531a47fd95b76ccc9ce7068e.png
[20161129184141164]: /images/20220714/3faf6eca098b48e9a727c2ed9ec558da.png
[20161129185929857]: /images/20220714/ac87095d1e1e45ebbb8dd5cbd1ecd8e9.png
[20161129190149455]: /images/20220714/db940430defa4cf3804ccb823edfff72.png
[20161129190735442]: /images/20220714/04d07352db2647c197b69cdd8a165c07.png
[Link 1]: http://download.csdn.net/detail/u011456552/9705184
[Link 2]: http://blog.csdn.net/u011456552/article/details/53391269