前端学习笔记JavaScript 常用方法兼容性封装

Posted 2020-08-19 朱两边

获取样式函数封装

function getStyle(ele,attr){
	if(ele.currentStyle){
		return ele.currentStyle[attr];
	}
	else{
		return window.getComputedStyle(ele,null)[attr];
	}
};

getClass()封装

function getClass(element, names){
	//如果存在getElementsByClassName()方法，则直接获取元素。
	if(document.getElementsByClassName){
		return element.getElementsByClassName(names);
	}
	var list = [];
	//获取所在元素区域内所有子元素
	var doms = element.getElementsByTagName(‘*‘);
	//处理传入的类名参数
	var namesList = myTrim(names);
	var namesArr = namesList.split(‘ ‘);

	for(var i = 0; i < doms.length; i++){
		var flag = true;
		//处理子元素类名
		var str = myTrim(doms[i].className);
		var arr = str.split(‘ ‘);
		for(var j = 0; j < namesArr.length; j++){
			//如果存在一个传入的类名参数的值在子元素类名中不存在，则标志位变为false。
			if(arr.indexOf(namesArr[j]) == -1){
				flag = false;
			}
		}
		//若标志位始终为true，则把该子元素加入到数组中；
		if(flag){
			list.push(doms[i]);
		}
	}
	return list;
};

//去除字符串两侧的空格，且把当中的多个空格合并成一个。
function myTrim(str){
	var str1 = str.replace(/(^\s*)/g,‘‘);
	var str2 = str1.replace(/(\s*$)/g,‘‘);
	var str3 = str2.replace(/(\s+)/g,‘ ‘);
	return str3;
};

仿jQuery $()获取元素

//仿jQuery $()获取元素
function $(str){
	var s = str.charAt(0);
	var ss = str.substr(1);
	switch(s) {
		case ‘#‘:
			return document.getElementById(ss);
			break;
		case ‘.‘:
			return getClass(document,ss);
			break;
		default:
		    return document.getElementsByTagName(str);
	}
}

 获取屏幕宽度兼容封装

function window_width(){
	if(window.innerWidth != null){
		return window.innerWidth;
	}
	else if(document.compatMode === ‘CSS1Compat‘){
		return document.documentElement.clientWidth;
	}
	return document.body.clientWidth;
}