JavaScript 获取计算后的样式

w3c标准浏览器的获取方法

var oDiv = document.getElementById('div');
//获取计算后的font-size
var sFs = getComputedStyle(oDiv,null).getPropertyValue('font-size');//推荐使用
//或者
var sFs= getComputedStyle(oDiv,null).fontSize; //不推荐使用

console.log(sFs);

//注1: 由于获取不同浏览器里计算后的css属性名称的不同(比如获取float)，在有些浏览器是.cssFloat，有些则是.styleFloat，为了避免浏览器判断，使用.getPropertyValue('float')就可以避免这个问题。
//注2: .getPropertyValue()方法里的值不支持驼峰写法，比如fontSize只能写成getPropertyValue('font-size')这种形式
}

 

IE9以下浏览器的获取方法：

var oDiv = document.getElementById('div');
//获取计算后的font-size
var sFs= oDiv.currentStyle.getAttribute('font-size'); //推荐使用
//或者
var sFs= oDiv.currentStyle.fontSize; //不推荐使用

console.log(sFs)

封装获取计算后样式的方法

function getStyle(node,attr){
    if(typeof getComputedStyle != 'undefined'){
        var value = getComputedStyle(node,null).getPropertyValue(attr);
        return attr == 'opacity' ? value * 100 : value; //兼容不透明度，如果是不透明度，则返回整数方便计算
    }else if(typeof node.currentStyle != 'undefined'){
        if(attr == 'opacity'){ //兼容不透明度
            return Number(node.currentStyle.getAttribute('filter').match(/(?:opacity[=:])(\d+)/)[1]);
        }else{
            return node.currentStyle.getAttribute(attr);
        }
    }
}