01-js部分兼容方法

1-获取非行内样式

//获取非行间样式，obj是对象，attr是值
 function getStyle(obj,attr){    
   if(obj.currentStyle){ 
        //针对ie获取非行间样式     
       return obj.currentStyle[attr];
   }else{
       //针对非ie
       return getComputedStyle(obj,false)[attr];  
   };
};

2-获取滚动条移动的垂直距离

window.onscroll = function(){
	//兼容问题  获取滚动条移动的垂直距离
	return var _top = document.body.scrollTop || document.documentElement.scrollTop;
	}

3-事件对象的兼容

//通常一个事件如果需要用到事件对象，直接无脑写兼容
	document.onclick = function(evt){
	  return var e = evt || event;
	}

4-获取键盘按键的ASC码值

//键盘事件对象
	document.onkeypress = function(evt){
		var e = evt || event;
		//keyCode：获取按下字符的ASC码值
		//兼容写法
	    return  var key = e.keyCode || e.which || e.charCode;	
	}
	// 把ASC码值转换为字符
	console.log(String.fromCharCode(98));

5-阻止事件冒泡

window.event.cancelBubble = true;  //IE特有的 谷歌支持 火狐不支持
e.stopPropagation();  //谷歌和火狐支持

//阻止事件冒泡：一定加在事件传播源
function stopMp (evt) {
  var e = evt || event;		
	//兼容写法
  return  e.stopPropagation?e.stopPropagation():e.cancelBubble = true;	
}

6-阻止浏览器默认默认行为

//阻止浏览器的默认行为写法
		//e.preventDefault();
		//e.returnValue = false;	
	 function stopMr (evt) {
		var e = evt || event;	
		//兼容写法  
	  return	e.preventDefault?e.preventDefault():e.returnValue = false;	
	}

7-事件绑定（监听）的兼容-为任意元素 绑定任意的事件

//为任意元素 绑定任意的事件 （任意的元素 事件的类型 事件的处理函数)，
//事件类型传入的时候不加on
		function addEventListener(element,type,fn){
			//判断浏览器是否支持这个方法
			if (element.addEventListener) {
				element.addEventListener(type,fn,false);
			}else if (element.attachEvent) {
				element.attachEvent("on"+type,fn);
			}else{
				element["on"+type]=fn;
			}
		}

8-事件解绑的兼容-为任意元素 解绑任意的事件

//为任意元素 解绑任意的事件 （任意的元素 事件的类型 事件的处理函数)，
//事件类型传入的时候不加on
//用什么方式绑定事件 就应该用对应的方式解绑事件
function removeEventListener(element,type,fnName){
		if (element.removeEventListener) {
			element.removeEventListener(type,fnName,false);
		}else if(element.detachEvent){
			element.detachEvent("on"+type,fnName);
		}else{
			element["on"+type] = null;
		}
	}

9-事件委托获取真实的时间操作源

function target (evt){	
	var e = evt || event;
	//获取真实的事件操作源 事件委托的核心
	var target = e.target || e.srcElement;
	//tagName事件元素的名称  大写
	//console.log(target.tagName);
	return target
}

10-textContent和innerText的兼容

//设置标签中的文本内容的时候 应该使用textContent属性 谷歌 火狐支持 IE8不支持
//设置标签中的文本内容的时候 应该使用innerText属性 谷歌 火狐 IE8都支持

//如果这个属性在浏览器中不支持 那么这个属性的类型就是undefined
//判断这个属性的类型 是不是undefined 就知道浏览器是否支持

       //设置任意的标签中间的任意文本内容
		function setInnerText(element,text){
			//判断浏览器是否支持这个属性
			if (typeof element.textContent == "undefined"){
				element.innerText = text;
			}else{//支持这个属性
				element.textContent = text;
			}
		}
	    
	    //获取任意标签中间的文本内容
	    function getInnerText(element){
	    	if (typeof element.textContent == "undefined") {
	    		return element.innerText;
	    	}else{
	    		return element.textContent;
	    	}
	    }

11-获取任意一个父级元素的第一个子级元素

//获取任意一个父级元素的第一个子级元素
      	function getFirstElementChild(element){
      		if (element.firstElementChild) {//true------支持
				return element.firstElementChild;	
      		}else{
      			var node = element.firstChild;//第一个子节点
      			while(node&&node.nodeType!=1){
      				node = node.nextSibling;
      			}
      			return node;
      		}
      	}

12-获取任意一个父级元素的最后一个子级元素

	//获取任意一个父级元素的最后一个子级元素
	function getLastElementChild(element){
     		if (element.lastElementChild) {//true
     			return element.lastElementChild;
     		}else{
     			var node = element.lastChild;//最后一个子节点
     			while(node&&node.nodeType!=1){
     				node = node.previousSibling;
     			}
     			return node;
     		}
     	}