继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

手写JQ里面的css方法

zhangfl_go
关注TA
已关注
手记 40
粉丝 28
获赞 163

封装在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})

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP