万能获取元素的具体样式值函数封装

1.在项目中，我们需要获取元素的某一个具体样式值，通常有以下两种方法

1.设置行内样式 元素.style.xxx=xxx | 元素.style.cssText='xxx'

元素.style.xxx：只能获取元素的行内样式值（我们必须把样式写在行内上才能获取到，写在样式表中的，我们获取不到）然而我们自己编写样式基本都不写在行内上只有基于JS设置元素的样式，才有可能设置在行内上 元素.style.xxx=xxx

2.设置样式类 元素.className=xxx

2.下面介绍一下window上的getComputedStyle方法：

【标准浏览器】window.getComputedStyle(元素对象,伪类/null) 返回的是所有被计算过的样式对象CSSStyleDeclaration

【IE6~8中】

元素.currentStyle 返回样式对象

=>获取元素所有计算过的样式（回流阶段计算的样式信息就是“计算过的样式”）：不论样式写在哪、再或者不按照浏览器默认样式处理等

基于getComputedStyle方法进行一个获得特定元素样式的封装：

function getCss(element, attr) {
            // 优化：如果我们获取的结果符合 "数字+单位" 的格式，我们默认就把单位去掉,变为纯数字；
如果获取的是 “纯数字的字符串”，我们也把其转换为数字；如果是组合值或者非数字的，则不进行任何的处理；
            let value = window.getComputedStyle(element)[attr],
                reg = /^\d+(px|rem|em)?$/i;            
                if (reg.test(value)) { 
                   value = parseFloat(value);  
              }            
            return value; 
       }

基于getComputedStyle方法进行一个设置特定元素样式的封装：

function setCss(element, attr, value) {
            // 优化：如果传递的是opacity，在IE低版本中用的filter设置样式  
           if (attr === "opacity") {
                element['style']['opacity'] = value;
                element['style']['filter'] = `alpha(opacity=${value*100})`;
                return;            
}            // 优化：对于某些特定样式（例如：width/height/margin/padding/marginTop.../paddingTop.../left/top/bottom/right...）如果传递的value没有带单位的（纯数字）我们手动默认给他加上PX单位            
let reg = /^(width|height|margin|padding)?(top|left|bottom|right)?$/i;
            if (reg.test(attr)) {
                // 只有人家value没有传单位，我们才自己加单位（只有传递的是有效数字，我们才设置单位）
                if (!isNaN(value)) {
                    value += 'px';
                }
            }            
            element['style'][attr] = value;
        }