javascript获取CSS样式-优快云博客

本文介绍了一种通过JavaScript获取HTML元素CSS样式的实用方法，包括处理内联样式、嵌入式及外部样式表，并展示了如何使用正则表达式来适配不同浏览器特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var css = function (_obj,_name){
    var result;
        //转换成小写
        _name = _name.toLowerCase();
        //获取样式值
        if(_name && typeof value === 'undefined'){
            //如果该属性存在于style[]中 （操作获取内联样式表 inline style sheets）
            if(_obj.style && _obj.style[_name]){
                result = _obj.style[_name];
            }
            //操作嵌入样式表或外部样式表 embedded style sheets and linked style sheets
            else if(_obj.currentStyle){
                 // 否则 尝试IE的currentStyle
                 _name = _name.replace(/\-([a-z])([a-z]?)/ig,function(s,a,b){return a.toUpperCase()+b.toLowerCase();});
                result = _obj.currentStyle[_name];
            }
            //或者W3C的方法 如果存在的话 Firefox,Opera,safari 
            else if(document.defaultView && document.defaultView.getComputedStyle){
                //获取Style属性的值，如果存在
                var w3cStyle = document.defaultView.getComputedStyle(_obj, null);
                result = w3cStyle.getPropertyValue(_name);
            }
            if(result.indexOf('px')!=-1) result = result.replace(/(px)/i,'');
            return result;
        }
    }

document.defaultView : 是w3c标准方法，取得元素的样式信息，因为有些样式是在外部css文件定义的，所以用element.style是取不到的如果是IE,可以用 element.currentStyle["name"] 。

JS中的正则表达式//表示之间的就是正则表达式就像VB里的""一样，只是告诉电脑//之间的是正则表达式后面的ig，i是表示区分大小写，g是全局模式如果不区分东西写，不开启全局，就不用写ig了/[^0-9*#-]/ig 区分大小写，全局模式/[^0-9*#-]/i 区分大小写，非全局模式/[^0-9*#-]/g 不区分大小写，全局模式/[^0-9*#-]/ 不区分东西写，非全局模式

转载于:https://my.oschina.net/hxwny/blog/367009