获取元素的具体样式信息

标签（空格分隔）： 未分类

引子：前面的属性都是组合的宽高，那么如何获取一个div的宽或者高

1.元素.style.属性名
需要我们把元素的样式都写在行内样式上；

2.使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式；

所有经过浏览器计算过的样式；只要当前的元素标签可以在页面中呈现出来，那么他的所有样式都是经过浏览器计算过的（渲染过的） --- 即使有些样式并没有设置；我们也可以获取到；

console.log(window.getComputedStyle(box,null).width);  //box是当前要操作的元素对象，null是当前元素的伪类，一般不用写none；
//获取到的结果：CSSStyleDeclaration  这个类的一个实例，包含当前样式的所有样式和属性

3.ie6-8不兼容解决；因为window下没有getComputedStyle,在IE6-8会报错；

//在ie6-8可以使用currentStyle来获取所有经过浏览器计算过的样式

console.log(box.currentStyle.width);

//获取当前所有浏览器计算过的样式中的[attr]
//curEle当前要操作的对象，attr我们要获取的样式的名称

//1.使用try   catch;
functio getCss(curEle,attr){
    var val  = null;
    try {
        val = window.getComputedStyle(curEle,null)[attr];
        } catch (e) {
            val = curEle.currentStyle[attr]
        }
    return val;
    
    }
    
    //需要保证try代码在不兼容浏览器中必须报错2.必须执行两次代码，浪费性能；

改进版2.0；

\\检测window下是否包含getComputdStyle这个属性
function getCss(curEle,attr){
    if ("getComputedStyle" in window){
    
    var = window。getComputedStyle(curEle,null)
    }else{
        val = curEle.currentStyle[attr]
    }
    return val;
    }

function getCss(curEle,attr){
    if (window.getComputedStyle){
    
    var = window.getComputedStyle(curEle,null)
    }else{
        val = curEle.currentStyle[attr]
    }
    return val;
    }
    

3.通过检测浏览器版本和类型来处理兼容

 function getCss(curEle,attr){
    if (/MSIE(6|7|8/.test(navigator.userAgent) )){
        val = curEle.currentStyle[attr]
    
    }else{
     var = window.getComputedStyle(curEle,null)
    }
    return val;
    }

对于部分样式属性，不同的浏览器获取的结构不一样，比如font-familufont-family;border;margin
因此写CSS进来第一步初始化默认样式，1.可以避免不同浏览器的差异，而且对js获取同一，也有帮助；
2.把复合值拆开使用；

升级

getCSS方法获取的值带px;

//把获取到的样式的单位值去掉
//只有数字加单位的才可以使用parseFloat;

function getCss(curEle,attr){
    var val = null,reg = null;
    if ("getComputedStyle" in window){
    
    val = window.getComputedStyle(curEle,null)
    }else{
        val = curEle.currentStyle[attr]
    } 
    reg = /^(-?\d+(\.\d)?)(px|pt|rem|em)?$/i  
    return reg.test(val)?parseFloat(val):val; 
    }

两种写法的不同

var val = null,reg=null;

var val = reg = null;  //reg是全局变量

浏览器不兼容某些元素：如opacity;

function getCss(curEle,attr){
    var val = null,reg = null;
    if ("getComputedStyle" in window){
    
    val = window.getComputedStyle(curEle,null)
    }else{
        if(attr === "opacity"){
        val = curEle.currentStyle["filter"];
        reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i
        }else{
            val = curEle.currentStyle[attr];
        }
    } 
    reg = /^(-?\d+(\.\d)?)(px|pt|rem|em)?$/i  
    return reg.test(val)?parseFloat(val):val; 
    }