封装 getCss、setCss、setGroupCss、css方法

1.getCss

  1. function getCss(curEle, attr) {
  2.     let val = null;
  3.     if ('getComputedStyle' in window) {
  4.         val = getComputedStyle(curEle)[attr];
  5.     } else {
  6.         val = curEle.currentStyle[attr];
  7.     }
  8.     let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize|opacity)$/;
  9.     if (reg.test(attr)) {
  10.         val = parseFloat(val);
  11.     }
  12.     return val;
  13.     }

2.setCss

  1. function setCss(curEle, attr, value)
  2.     let reg=/^(width|height|padding|margin|left|right|top|bottom|fontSize)$/;
  3.     if (reg.test(attr)) {
  4.         if (typeof value === 'number') {
  5.             value = value + 'px';
  6.         }
  7.     }
  8.     curEle.style[attr] = value;
  9. }

3.setGroupCss

  1. function setGroupCss(curEle, obj) {
  2.     // 对象有几个键值对就调用几次setCss方法，
  3.     for (var key in obj) {
  4.         setCss(curEle, key, obj[key])
  5.     }
  6. }

4.css

  1. function css(){
  2.     let [curEle,attr,value] = arguments;
  3.     // 如果传参的个数是2，那就说明不是获取样式就是批量设置样式
  4.     if(arguments.length === 2){
  5.         // 如果第二个参的数据类型是字符串，那就是获取样式
  6.         if(typeof attr === 'string'){
  7.             // 如果第二个参数是字符串，说明是获取样式
  8.             return getCss(curEle,attr)
  9.         }
  10.         else {
  11.             setGroupCss(curEle,attr)
  12.         }
  13.     }
  14.     // 如果传递的参数是3个，那就是单个设置样式
  15.     else if(arguments.length === 3){
  16.         setCss(curEle,attr,value)
  17.     }
  18. }