JavaScript提取行间样式，currentStye与getComputedStyle方法

很久没更新博客了，这段时间一直被js困扰，学习在我看来是件痛苦并快乐的事情，把今天学习到的东西记录下来，方便自己忘记，以便以后复习。

我们先来对一个div设置一些样式

<div id="div1"></div>

#div1{
			width: 100px;
			height:100px;
			background: red;
		}

效果如下图

通常我们用js获取或修改行间样式会用这样一句代码

但是，问题来了，这只能修改“行间样式”，对于外部链接样式则是行不通的，那么我们怎么来处理这个问题呢

window.onload=function(){
			var odiv=document.getElementById('div1');
			alert(odiv.currentStyle.width);
		};

很明显，通过currentStyle我们获取到了div的样式，但是这是只能在IE下行得通，在Chrome和火狐下什么反应都没有，还会报错，说width没有定义

那好，我们在换一种方法，就是getComputedStyle，它有两个参数，下面我们通过实例来看一下，我们js部分换一种写法

window.onload=function(){
			var odiv=document.getElementById('div1');
			// alert(odiv.currentStyle.width);
			alert(getComputedStyle(odiv,null).width);
		};

话不多说，直接看效果

Chrome下面的效果：

大于IE9浏览器效果，正常显示

但是在IE低版本浏览器下可就没那么幸运了，比如IE8,7,6..

结果很明显了，要么IE可以，Chrome不可以，要么Chrome可以，IE不可以

这可怎么办呢，牵扯到浏览器兼容问题，解决办法其实很简单，不要忘记我们还有if else语句呢

window.onload=function(){
			var odiv=document.getElementById('div1');
			if(odiv.currentStyle){
				alert(odiv.currentStyle.width);
			}
			else{
				alert(getComputedStyle(odiv,null).width);
			}
		};

这样兼容问题就解决了，并且在IE8以下都能正常运行，现在看来万事大吉了，好像要结束的样子

但是问题又来了，如果我们要提取很多样式，难道要写很多个if else，怎么可能呢，杀了我吧，哈哈哈

这里就用到了封装，我们把它封装起来，想要用的时候调用就可以，非常方便

function getStyle(obj,name){
			if(obj.currentStyle){
				return obj.currentStyle[name];
			}else{
				return getComputedStyle(obj,null)[name];
			}
		};
		window.onload=function(){
			var odiv=document.getElementById('div1');
			alert(getStyle(odiv,'width'));	//调用
		};

效果同样，兼容浏览器，也方便以后重复利用

如有错误还请大神指出，见谅！