封装在utils工具函数文件里
let utils = function(){
let getCss = function(curEle,attr){
if(window.getComputedStyle === undefined){return}
let value = window.getComputedStyle(curEle,null)[attr],
reg = /-?\d+(\.\d+)?(px|rem|em|pt)/i;
//过滤是否为纯数字或者数字+单位,使用parseFloat拿到数值
reg.test(value)?value = parseFloat(value):null;
return value;Ï
}
let setCss = function(curEle,attr,value){
if(attr === 'opacity'){
curEle['style'].opacity = value;
curEle['style'].filter =`alpha(opacity=${value*10})`;
return;
}
if(!isNaN(value)){
let reg = /^(width|height|fontSize|(margin|padding)?(top|left|right|bottom)?)$/i;
reg.test(attr)?value+='px':null;
}
curEle['style'][attr] = value;
}
let setGroupCss = function(curEle,options={}){
for(let key in options){
if(!options.hasOwnProperty(key)) continue;
setCss(curEle,key,options[key]);
}
}
let css = function(...arg){
let len = arg.length,second = arg[1],fn = getCss;
len>=3?fn = setCss:null;
len===2&&second instanceof Object&& second !=null ? fn=setGroupCss : null;
return fn(...arg);
}
return{ css }
}()
//使用
utils.css(document.body,{background:“red”,height:200})
點擊查看更多內容
1人點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦