JavaScript浏览器兼容问题

1、获取当前css样式

function getStyle(node, styleAttr){
		if(node.currentStyle){
			return node.currentStyle[styleAttr];
		}else{
			return getComputedStyle(node)[styleAttr];
		}
}

2、通过class获取元素节点。

//兼容IE8以下  通过class获取元素节点。	
function elementsByClassName(parentNode, className){
		var arr = [];
		var nodes = parentNode.getElementsByTagName("*");
		for(var i = 0; i < nodes.length; i++){
			if(nodes[i].className == className){
				arr.push(nodes[i]);
			}
		}
		return arr;
	}

3、获取当前滚动的距离

//获取当前滚动距离
		window.onload = function(){
			document.onclick = function(){
				var srcollTop = document.documentElement.srcollTop || document.body.srcollTop;
				alert(srcollTop);//浏览器兼容
				var srcollLeft = document.documentElement.srcollLeft || document.body.srcollLeft;
				alert(srcollLeft);//浏览器兼容
			}
		}

4、事件对象属性
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

  //事件对象属性
document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
    var e=ev;
    console.log(e);
  }
  document.onclick=function(event){//谷歌和IE支持，火狐不支持；
    var e=event;
    console.log(e);
  }
  document.onclick=function(ev){//兼容写法；
    var e=ev||window.event;
    var mouseX=e.clientX;//鼠标X轴的坐标
    var mouseY=e.clientY;//鼠标Y轴的坐标
  }

5、事件的目标/触发事件的元素节点(target)（IE8以下不支持）（IE8以下用window.event.srcElement）

问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ?event.srcElement : event.target;

//事件的目标/触发事件的元素节点(target)（IE8以下不支持）（IE8以下用window.event.srcElement）
			oBtn.onclick = function(ev){
					var e = ev || window.event;
					alert(e.target.innerHTML);
					// 1、IE8以下不支持这么获取触发对象 window.event.srcElement;
					// 2、target和this没有任何关系。
					var target = e.target || window.event.srcElement;
					alert(target);
				}

6、键盘事件属性–keyCode键码（IE8以下不兼容【which】）

//键盘事件属性--keyCode键码（IE8以下不兼容【which】）
			window.onkeydown = function(ev){
					var e = ev || window.event;
					var which = e.keyCode || e.which;
					alert(which);   //IE8以下不兼容
				}

7、charCode字符编码（IE8以下不兼容【which】）

//charCode字符编码（IE8以下不兼容【which】）
			window.onkeypress = function(ev){
					var e = ev || window.event;
					// alert(e.charCode)
					alert(String.fromCharCode(e.charCode));
					// alert(e.which);
					var which = e.charCode || e.which;
					alert(which)
				}

8、阻止超链接的默认行为

//阻止超链接的默认行为
			//跨浏览器的阻止默认行为
			function preDef(e){
				if(e.preventDefault){
					e.preventDefault();
				}else{
					window.event.returnValue = false;
				}
			}

9、阻止事件冒泡

阻止冒泡

cancelBubble=true stopPropagation()

//阻止事件冒泡
			/*阻止冒泡
			cancelBubble=true        stopPropagation()*/
			function stopBubble(e){
				if(e.stopPropagation){
					e.stopPropagation();
				}else{
					e.cancelBubble = true;
				}
			}

10、浏览器宽高问题

var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
  var winH=document.body.clientHeight||document.docuemntElement.clientHeight;//网页可见区域宽
  //以上为不包括边框的宽高，如果是offsetWidth或者offsetHeight的话包括边框

  var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
  var winHH=document.body.scrollHeight||document.docuemntElement.scrollHeight;//整个网页的高

  var scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
  var scrollLeft=document.body.scrollLeft||document.docuemntElement.scrollLeft;//网页左卷的距离

  var screenH=window.screen.height;//屏幕分辨率的高
  var screenW=window.screen.width;//屏幕分辨率的宽
  var screenX=window.screenLeft;//浏览器窗口相对于屏幕的x坐标（除了FireFox）
  var screenXX=window.screenX;//FireFox相对于屏幕的X坐标
  var screenY=window.screenTop;//浏览器窗口相对于屏幕的y坐标（除了FireFox）
  var screenYY=window.screenY;//FireFox相对于屏幕的y坐标

11、事件监听器
addEventListener() 方法用于向指定元素添加事件句柄，IE8及其以下不支持，火狐和谷歌支持。
removeEventListener() 方法移除由 addEventListener() 方法添加的事件函数:
IE事件处理函数及浏览器兼容写法
IE事件处理函数
IE 实现了与 DOM 中类似的两个方法：attachEvent()和 detachEvent()。这两个方法接受相同的参数：事件名称和函数。

//添加事件
		function addEvent(node,eventType,func){//node添加在谁的身上；eventType事件类型；func函数
			if(node.addEventListener){
				node.addEventListener(eventType,func,false);
			}else{
				node.attachEvent("on" + eventType,func);
			}
		}
		//删除事件
		function removeEvent(node,eventType,func){
			if(node.removeEventListener){
				node.removeEventListener(eventType,func,false);
			}else{
				node.detachEvent("on" + eventType,func);
			}
		}

11、const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法：统一使用var关键字来定义常量.

12、window.location.href问题

说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法：使用window.location来代替window.location.href.

13、元素到浏览器边缘的距离

function offsetTL(obj){//获取元素内容距离浏览器边框的距离（含边框）
    var ofL=0,ofT=0;
    while(obj){
      ofL+=obj.offsetLeft+obj.clientLeft;
      ofT+=obj.offsetTop+obj.clientTop;
      obj=obj.offsetParent;
    }
    return{left:ofL,top:ofT};
}