javascript获取非行间样式的方法(可以兼容各个浏览器)
在说利用javascript获取非行间的用法之前呢我们先说一下怎么用javascript来获取行间样式吧！如下HTML:
<div id='div1' style='width:200px; height:200px; background:red;'></div>
Javascript：
window.onload=function(){
var odiv=document.getElementById('div1');
alert(odiv.style.width);
}
当样式写在行间的时候，可以通过上面的js获取div的宽，弹出结果如下：
可是本着行为和样式分离的原则，我们知道把样式写在行间不但页面的整洁度大打折扣，对我们以后的维护也是不利的。所以我们应该把样式从元素中提取出来。
HTML:
<div id='div1'></div>
CSS:
#div1{width:200px; height:200px; background:red;}
然后再运行我们第一次写的js代码，发现这个时候什么都没有获取到，弹出框里什么都没有弹出来。实际上上面的js代码只能操作行间的样式，对于非行间的样式是束手无策的！
所以这个时候我们就不能通过上面的js来获取非行间的样式了，那么我们应该怎么写呢？别急，我们可以使用currentStyle和getComputedStyle来获取div元素的样式
function getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//FF、Chrome
return getComputedStyle(obj,false)[name];
}
};
window.onload=function(){
var odiv=document.getElementById('div1');
alert(getStyle(odiv,'width'));
}
curretnStyle还比较好理解，我们就单说一下getComputedStyle怎么使用吧！从这个单词字面上理解就是计算机计算后的样式，为什么这么说呢，就比如div的样式影响它的因素很多，不只是它自己本身的样式，还可能父类的一些样式也会影响它，所以计算机要计算一下div的最终样式。getComputedStyle有两个参数，其中第一个参数指的是你要获取哪个元素的样式，而第二个参数则是一个垃圾，你可以往里面放任何东西，包括你的名字都是可以的。如getComputedStyle(obj,null)，或者getComputedStyle(obj,’gnn’)，一般我们会把第二个参数设置成false，这个则看个人喜欢了！
运行上面的js代码发现可以弹出div的宽度了，可是如果我们想要获取div的背景应该怎么写呢？如果像获取宽度一样去获取背景色你就发现是错误的，这是因为这个方法只能获取单一样式对于复合样式如（background、border等）是没有作用的！那难道我们就只能放弃了吗？答案当然是否定的了，我们可以像下面这样写就可以获取元素的颜色了
window.onload=function(){
var odiv=document.getElementById('div1');
alert(getStyle(odiv,'backgroundColor'));
}
好了，上面就是利用javascript获取非行间样式的方法，可以兼容各个浏览器！
如有疑问，欢迎留言探讨！
