js获取元素具体样式属性值

1.元素.style.属性名
需要把元素的样式都写在行内样式上才可以（写在样式表中不起作用）
在真实项目中，这种方式不常用（无法实现css和html分离）
2.使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式
（只要当前的元素标签可以在页面中呈现出来，那么它的所有样式都是经过浏览器计算过的/渲染过的），哪怕有些样式没有写，我们也可以获取到
window.getComputedStyle(当前要操作的元素对象,当前元素的伪类[一般我们不用伪类写null])
console.log(window.getComputedStyle);
console.log(window.getComputedStyle(box,null));  //获取所有样式
console.log(window.getComputedStyle(box,null).height);

在ie6~8下不兼容,因为window下没有getComputedStyle这个属性
在ie6~8下可以使用currentStyle来获取所有经过浏览器计算过的样式
<span style="font-size:14px;">console.dir(box.currentStyle);</span>
3.getComputedStyle作用于伪类
 
 

  
  
  
  

  
  
<span style="font-size:14px;">var p1 = document.getElementById("boxP");
console.log(window.getComputedStyle(p1,"before").content);</span>
  
  

 
 
4兼容写法
 
 

  
  
  
  

  
  
<span style="font-family:SimSun;">function getCss(curEle,attr){
    var val = null,reg = null;
    if("getComputedStyle" in window){
        val = window.getComputedStyle(curEle,null)[attr];
    } else {   //ie6~8不支持上面属性
        //不兼容
        if(attr === "opacity"){
            val = curEle.currentStyle["filter"];   //'alpha(opacity=12,345)'
            reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
            val = reg.test(val)?reg.exec(val)[1]/100:1;
        } else {
            val = curEle.currentStyle[attr];
        }
    }
    reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i;
    return reg.test(val)?parseFloat(val):val;
}</span>