javascript的兼容性
javascript的浏览器兼容问题是前端开发中一直存在的一个问题，和css兼容性一样，我们在开发过程中
必须了解一些基本的兼容性处理方法，下面从以下几个方面总结下js开发常碰到的问题。
1 常用的方法兼容 2 样式访问兼容 3 DOM选取及对象引用 4 事件处理 5 其他兼容 6 浏览器判断
（注意：文中所有涉及到标签的例子，为了不使标签被编辑器翻译 标签书写时都加了空格，如
< li>1< /li> ）
.getYear方法
获取日期时经常用到的方法，例如 var year = new Date().getYear(); 在ie中得到的是当前年份2011
但是在ff中式是111，
解决方法：year = year<1900?1900+year:year 或者用getFullYear方法
.Css的float属性
Js访问给定css的属性方法是：obj.style.property 但是css中个别属性和js保留字是一样的，所以在获取这些
特殊的css属性时写法不同 例如获取一个对象的float属性:
ie中 Obj.style.styleFloat 火狐中: Obj.style.cssFloat
解决方法：添加浏览器判断
.访问设置class属性
class也是js的保留字，获取class的方法也有不同
ie8之前版本的ie:Obj.getAttribute(“className”);
ie8 ie9 以及火狐:Obj.getAttribute(“class”);
setAttribute方法和getAttribute的方式一样
解决方法：先判断浏览器或者使用obj.className直接设置
.对象高宽问题
火狐中如果将一个对象的height属性值赋给另一个对象的height样式，obj.style.height=imgObj.height这种写法是无法识别的，这个问题在使用对象的clientHeight和clientWidth属性时也会遇到
解决方法：obj.style.height=imgobj.height+”px” 在给样式赋值时后面加上px
.集合对象访问
Ie下可以使用()或[]获取集合类对象，火狐只能用[]
Alert(document.forms(“formName”)) 火狐无法识别，
Alert(document.forms[“formName”]) 都可以识别，处理方式：使用[]获取
.Iframe引用
ie可以通过id或者name访问这个iframe的window对象，但是火狐只能通过name访问，
解决方法：统一用name获取iframe对象或者使用document.getElementById(“frameId”)获取
例如 alert(window.fr2); //火狐得不到 alert(window.fr1); //都能得到
.获取父节点
ie中支持parentElement和parentNode，火狐中只能用parentNode获取。
解决方法：统一用parentNode获取，obj.parentNode
.childNodes获取子节点
< ul id="ul" >
< li>1< /li>
< li>2< /li>
< li>3< /li>< /ul>
火狐得到长度是7 ie是3
解决方法：使用jQuery或者在通过nodeName==“#text”在循环
中把文本节点剔除如下：
var ch=document.getElementById("ul").childNodes;
for(i= 0;i
if(ch[i].nodeName=="#text"){
alert("文本节点");continue;
}
alert("每一个li节点我会弹出一次");
}
.节点操作removeChild和removeNode
removeNode()参数为false或者true
false：只删除本身
true：删除本身以及下属节点
在火狐中没有removeNode方法，只能通过removeChild方法代替
解决方法：用removeChild实现删除节点的效果
或者用jQuery的方法如下
< ul id="ul" >
< li>1< /li>
< li>2< /li>
< li>3< /li>< /ul>
var ul= document.getElementById("ul");
ul.removeNode(true);//ie删除方法
ul.parentNode.removeChild(ul);//火狐删除方法
.innerText的用法
innerText获取节点内的文本吗，ie中正常，火狐中不识别火狐中使用的是textContent
解决方法：判断浏览器或者使用jQuery
.Window.event事件对象，ie中可以获取，火狐中无法获取
Function test1(){
alert(event);//ie存在火狐不存在
}
Function test2(ev){
alert(ev);//ie存在火狐存在
}
解决方法：传递event参数给调用的方法，如下
< input type="button" value="test" onclick="testEvent(event)" / >
function testEvent(eventTa){
var e = eventTa||window.event;
var srcElement= e.srcElement||e.target;
}
其中e.srcElement是id获取事件源对象，e.target是火狐获取事件源对象varsrcElement=e.srcElement||e.target;是兼容写法
.offsetX offsetY
获取鼠标当前坐标，包含滚动 火狐不支持
解决方法：
用layerX和layerY替代，效果一样
.Event.X和event.Y
获取鼠标当前坐标，不包含滚动 火狐不支持
解决方法：
用pageX和pageY代替
.捕获键盘值
ie中event.keyCode获取 火狐中用event.which获取
如下：
function testEvent(eventTa){
//获取时间对象
vare = eventTa||window.event;
//获取事件源对象
varsrcElement= e.srcElement||e.target;
//获取按键对象
varkey = e.which||e.keyCode;
//如果同时按下ctrl和回车键则进入
if(e.ctrlKey&&(key==13)){
alert("ctrl+enter");
}
}
.鼠标位置，事件对象综合示例:
< input style="height:20px;width:130px;border:1px solid #000;" onclick="caTest(event,this)" / >
function caTest(eventTa,obj){
//如果tip对象已经存在，则情况其内容，并且删除该对象
if(document.getElementById("tip")){
//如果tip对象已经存在，则情况其内容，并且删除该对象
if(document.getElementById("tip")){
document.getElementById("tip").innerHTML="";
if(navigator.userAgent.indexOf(“MSIE”)!=-1){//ie删除节点方法
document.getElementById("tip").removeNode();
}else{
//火狐
document.getElementById("tip").parentNode.removeChild(document.getElementById("tip"));
}
}
//obj为input对象本身，这里获取input对象的坐标
varobjx= obj.offsetLeft;
varobjy= obj.offsetTop;
//获取事件对象和当前鼠标的位置
vare = eventTa||window.event;
varx = e.pageX||e.x;
vary = e.pageY||e.y; 见下页
//创建一个div对象
vardiv = document.createElement("div");
div.id="tip";
//设置为绝对定位
div.style.position="absolute";
//设置div的位置，x和y是之前取得的鼠标位置
div.style.top=y+"px";
div.style.left=x+"px";
//设置div大小颜色等
div.style.border="1px solid #123";
div.style.width="200px";
div.style.height="100px";
div.style.background="#fee“;
将div对象写入body中
document.getElementById("body").appendChild(div);
document.getElementById("tip").innerHTML="提示信息
提示信息提示信";
}
