JavaScript 获取计算后的样式

最新推荐文章于 2023-02-07 15:54:42 发布

原创最新推荐文章于 2023-02-07 15:54:42 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #计算后的样式 #style

JavaScript 同时被 3 个专栏收录

37 篇文章

订阅专栏

兼容

7 篇文章

订阅专栏

style

1 篇文章

订阅专栏

本文介绍了一种兼容W3C标准及IE9以下浏览器的计算后样式获取方法，并提供了兼容不同浏览器的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);
        }
    }
}